How to use CKEditor Plugins?

Is there an existing CKEditor plugin you like? Chances are you will be able to use it with AlloyEditor as well!

1 - Download your plugin

CKEditor offers a huge selection of plugins. Find and download those you need along with all its dependencies into AlloyEditor's plugins folder.

2 - Add the CKEditor plugin

All that's left for you to do is to add the plugin to your editor configuration*
// Extend the extraPlugins value adding the new plugins to the default ones
AlloyEditor.editable('contentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',myplugin,myplugindependency'

* Keep in mind that some plugins have dependencies that are not bundled inside AlloyEditor. You'll need to download and add them to the extraPlugins property as well

3 - Add one of AlloyEditor's ui-bridge plugins

AlloyEditor provides a set of plugins that work as an adapter for CKEditor UI features generating compatible buttons, richcombos, panels and more that can be reused. All you need to do is use the appropriate ui-bridge plugin and add the buttons to an existing or new selection.

For example, you can reuse the Font Size and Family Plugin like this:.
var textSelection;

for (var i = 0; i < AlloyEditor.Selections.length; i++) {
    textSelection = AlloyEditor.Selections[i];

    if ( === 'text') {

textSelection.buttons = ['Font', 'FontSize'].concat(textSelection.buttons);

AlloyEditor.editable('contentEditable', {
    extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ae_richcombobridge,font'

Current existing UI-Bridge plugins are:

4 - Use moono skin for visual compatibility

Use the new moono skin to close the gap between AlloyEditor default look and feel and CKEditor's.
<link href="alloy-editor/assets/alloy-editor-moono-min.css" rel="stylesheet"></link>
comments powered by Disqus