The CKEditor provides richtext editing capabilities in a browser independent way. It has a
plugin-driven architecture. Plugins are JavaScript files that are loaded at the end of the
CKEditor loading process, before the initialization and activation of CKEditor instances.
Plugins are named and defined in a file named plugin.js which resides under a
path matching the plugin's name. Plugins may add UI features, change the behavior of existing
UI components or add data manipulation features. The CKEditor provides automatic
runtime plugin dependency management.
The custom plugin my-plugin can be added to a CoreMedia
Studio project by editing the following file
my-project/resources/META-INF/resources/ckeditor/_source/plugins/my-plugin/plugin.js
If not already done in the parent project, the path of the plugin.js has to be configured as a
additional resource in the project pom.xml:
<resources>
...
<resource>
<directory>${basedir}/src/main/resources/META-INF/resources/ckeditor/_source</directory>
<targetPath>META-INF/resources/ckeditor</targetPath>
</resource>
</resources>
Example 7.30. Adding resource path to pom.xml
Note that when explicitly configuring custom resources in a maven pom, you will need to include the maven default resource rules, such as copying of src/main/resources and src/main/generated-resources to the target (represented as ... in the example above). Please consult the blueprint sources for example usages.
The content of the plugin.js may be similar to
CKEDITOR.plugins.add('my-plugin',
{
beforeInit(editor){
...
},
init : function(editor) {
...
},
lang : [...],
requires: [...]
});Example 7.31. Customizing the CKEditor
The argument passed to the add method is a so-called
plugin
definition whose beforeInit and init functions are called
upon creation of every CKEditor instance in that package. The definition may also provide
the lang and requires attributes which respectively define valid
languages for the plugin and a list of required plugins.
The official CKEditor API documentation is available at http://docs.ckeditor.com/#!/api.
The custom plugin can now be registered by the CKEditor. This is done by using the
addCKEditorPluginsPlugin with your richTextArea:
<ui:richTextArea>
<plugins>
<ui:addCKEditorPluginsPlugin plugins="my-plugin"/>
</plugins>
</ui:richTextArea>
You can remove predefined plugins so that they are not loaded by CKEditor. This is done by
using the removeCKEditorPluginsPlugin in your richTextArea. To
remove the CKEditor plugin about, for example, add the following to your
declaration:
<ui:richTextArea>
<plugins>
<ui:removeCKEditorPluginsPlugin plugins="about"/>
</plugins>
</ui:richTextArea>
The list of additional CKEditor plugins loaded by CoreMedia
Studio by default is documented in the ASDoc of richTextArea as
the constant defaultCKEditorExtraPlugins. The list of standard CKEditor
plugins, that are excluded by default are listed in the ASDoc of richTextArea
as the constant defaultCKEditorRemovePlugins.
To change other configuration options of CKEditor, you can use the
customizeCKEditorPlugin with your richTextArea.
A list of CKEditor configuration options can be found here:
CKEditor.config
For example, to
instruct the CKEditor to add 2 spaces to the text when hitting the TAB key, use the
following code:
<ui:richTextArea>
<plugins>
<ui:customizeCKEditorPlugin>
<ui:config>
<exml:object tabSpaces="2"/>
</ui:config>
</ui:customizeCKEditorPlugin>
</plugins>
</ui:richTextArea>
Items or Buttons which execute custom CKEditor commands have to be added to the richtext
toolbar using the AddItemsPlugin as described in Section 7.4.5.5, “Customizing Richtext Toolbar”.
This cannot be done in the CKEditor directly.
 |  |  |
 |