The buttons and menu items of the toolbar can be customized by applying the
addItemsPlugin and removeItemsPlugin to
richTextPropertyField. The item ids of the buttons and menu items provided are listed as
constants in the ASDoc of richTextPropertyField.
It is also possible to add a toolbar button for a custom plugin or a CKEditor plugin.
When adding a new button to the toolbar and you want it to perform a
CKEditor command, you can use the richTextAction with the configured
command name. Currently used commands are listed as constants in the ASDoc.
When adding or extending a menu in the toolbar and the menu items should perform richTextActions
for context-sensitive CKEditor commands, you should use the richTextMenuCheckItem
for a correct representation of the enabled and active states of the command. See the ASDoc for more information.
It is recommended to add the functionality into a Studio plugin that can be used in the
richTextPropertyField configuration (see Section 7.1, “Studio Plugins”
for Studio plugins).
The following code, included in a file CustomizeRichTextPlugin.exml, moves the italic
button between the internal link and external link
button and removes the heading 3 paragraph format menu from the rich text toolbar.
<?xml version="1.0" encoding="UTF-8"?>
<exml:plugin xmlns:exml="http://www.jangaroo.net/exml/0.8"
xmlns="exml:ext.config"
xmlns:ui="exml:com.coremedia.ui.config">
<exml:import class="com.coremedia.cms.editor.sdk.config.richTextPropertyField"/>
<ui:nestedRulesPlugin>
<ui:rules>
<toolbar>
<plugins>
<ui:removeItemsPlugin>
<ui:items>
<component itemId="{richTextPropertyField.ITALIC_BUTTON_ITEM_ID}"/>
<component itemId="{richTextPropertyField.PARAGRAPH_HEADING3_ITEM_ID}"/>
</ui:items>
</ui:removeItemsPlugin>
<ui:addItemsPlugin>
<ui:items>
<ui:iconButton itemId="{richTextPropertyField.ITALIC_BUTTON_ITEM_ID}">
<baseAction>
<ui:richTextAction commandName="{richTextAction.COMMAND_ITALIC}"/>
</baseAction>
</ui:iconButton>
</ui:items>
<ui:after>
<component itemId="{richTextPropertyField.INTERNAL_LINK_BUTTON_ITEM_ID}"/>
</ui:after>
</ui:addItemsPlugin>
</plugins>
</toolbar>
</ui:rules>
</ui:nestedRulesPlugin>
</exml:plugin>Example 7.28. Customizing the rich text editor toolbar
The baseAction, as in the above example, can also reference a custom action defined in a custom or CKEditor plugin. In this
case, the commandName of the richtextAction is the name given in the plugin definition.
You can either apply the plugin to all rich text fields or only to a specific content type. When you add it to your
*StudioPlugin.exml file (the <bp:customizeRichTextPlugin/> line),
then the plugin is applied to all rich text fields:
<editor:studioPlugin>
<ui:rules>
…
<editor:richTextPropertyField>
<plugins>
<bp:customizeRichTextPlugin/>
</plugins>
</editor:richTextPropertyField>
</ui:rules>
</editor:studioPlugin>When the plugin should only be applied to a specific rich text field, you have to add it to a specific
*DocumentForm.exml file:
<editor:documentTabPanel>
<items>
…
<editor:richTextPropertyField propertyName="detailText">
<plugins mode="append">
<bp:customizeRichTextPlugin/>
</plugins>
</editor:richTextPropertyField>
</items>
</editor:documentTabPanel>Here, it is important, that you use the mode="append" attribute. Otherwise, you would remove all plugins that are
already defined for this field.
You may also add a custom icon to the toolbar or use one bundled with an existing CKEditor plugin.
To do this, apply the addItemsPlugin as above to the richTextPropertyField.
The iconButton can take the arguments iconCls, text and tooltip in order to apply and localize the custom icon.
The iconCls property defines the css class of the icon. The icon image location
and style may then be added to the css using the css class name defined by the iconCls.
<ui:iconButton iconCls="{MyPluginLabels_properties.INSTANCE.MyPlugin_icon}"
tooltip="{MyPluginLabels_properties.INSTANCE.MyPlugin_tooltip}"
text="{MyPluginLabels_properties.INSTANCE.MyPlugin_text}">
Example 7.29. Adding a custom icon to the rich text editor toolbar
As in the example above, these three properties may be defined in a separate properties bundle which can be localized.
 |  |  |
 |