One of the custom attribute types is the color picker, which I will demonstrate in this post. Our test setup will use a standard eZ Publish 4.0.x installation with the Website Interface 1.3 and a pre-release of the Online Editor 5.0.

Custom tags

Let's start by defining a custom tag called “span”. I will not cover this in much detail as custom tags are well described in the online documentation and the basic setup has not changed since the Online Editor 4.0. The most important thing here is to tell eZ Publish that our new custom tag will be used as an inline element. We will do this by adding the following settings to settings/override/content.ini.append.php

[CustomTagSettings]
AvailableCustomTags[]=span
IsInline[span]=true

In the Online Editor 5.0, the "insert custom tag" dialog box will look something like this (note that there is still more configuration to do later to get the "Color" attribute to display as shown):

This is how the Online Editor renders an inline custom tag element:

Here is a preview of the output on the front-end of the site:

Next, we will create a span.tpl template in extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags with following content:

<span {if is_set( $color )}style="color: {$color}"{/if}>{$content}</span>

Now we are done with the custom tag configuration.

Custom attributes

Now that we have our template ready, we need to configure a custom attribute “color”. To do so, we add the following settings to the settings/override/content.ini.append.php file:

[span]
CustomAttributes[]=color
CustomAttributesDefaults[color]=#FF0000

The CustomAttributesDefaults setting specifies a default attribute value when the custom tag is first inserted.

Online Editor custom attribute types

We are almost done. Now let's take a look at the new custom attribute configuration features. Settings for this are stored in ezoe_attributes.ini, so we need to create our new configuration file in settings/override/ezoe_attributes.ini.append.php. In this file, we will specify that the Online Editor should use the color picker for our "color" custom attribute:

[CustomAttribute_span_color]
Name=Color
Type=color

The first line defines a block where the first item (“span”) is the custom tag name, while the second item (“color”) is the custom attribute name. The "Name" setting enables us to insert a human-readable name for the attribute when it is displayed in the "insert custom tag" dialog box. The value of the "Type" setting informs the Online Editor that we want to use a color picker.

Full details about the new Online Editor 5.0 custom attribute settings can be found in extension/ezoe/settings/ezoe_attributes.ini.

Below is a screenshot of the user interface for the color picker.

Remember to clear the cache before testing!