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-custom-ckeditor-package/sencha/resources/ckeditor/plugins/my-plugin/plugin.js

If not already done in the parent project, the path of the plugin.js has to be configured as an additional global resource in your package. We will add a src/packageConfig.js first...

// Adding global resources to ext manifest
Ext.registerGlobalResources({
  "ckeditor.plugin.myplugin": "<@com.coremedia.cms__studio-client.my-custom-ckeditor-package>ckeditor/plugins/myplugin/plugin.js",
  ...
});

... and then add it to the jangaroo.config.js:

module.exports = jangarooConfig({
  type: "code",
  autoLoad: [
    "./src/packageConfig",
    ...
  ],
  sencha: {
    name: "com.coremedia.cms__studio-client.my-custom-ckeditor-package",
    namespace: "...",
    ...
  },
});

The content of the plugin.js may be similar to

CKEDITOR.plugins.add('my-plugin',
{
  beforeInit(editor){
    ...
  },
  init : function(editor) {
    ...
  },
  lang : [...],
  requires: [...]
});

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:

Config(RichTextArea, {
  plugins: [
    Config(AddCKEditorPluginsPlugin, {
      plugins: 'my-plguin'
    })
  ]
})

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:

Config(RichTextArea, {
  plugins: [
    Config(RemoveCKEditorPluginsPlugin, {
      plugins: 'about'
    })
  ]
})

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:

Config(RichTextArea, {
  plugins: [
    Config(CustomizeCKEditorPlugin, {
      ckConfig: {
        tabSpaces: 2,
      }
    })
  ]
})

Items or Buttons which execute custom CKEditor commands have to be added to the richtext toolbar using the AddItemsPlugin as described in Section 9.6.5.5, “Customizing Richtext Toolbar”. This cannot be done in the CKEditor directly.

Styling of CKEditor Dialogs

As some original CKEditor dialogs are used, the styling of these dialogs had to be adjusted, so that they fit better into Studio. If you want to change the styling of CKEditor dialogs there are two possible ways to do so:

For both options to work you must disable the custom CoreMedia rules for CKEditor dialogs. This can be done by setting the SCSS variable $cm-include-richtextarea-dialog to false.