Creating Plugins for 8.6 Editor (3rd Party)

  • Updated

This article discusses building your first custom plugin for the new 3rd party editor compatible with Ektron 8.6.

With the release of 8.6, Ektron has incorporated a 3rd party editing tool that is tightly coupled with our editing experience after installation. After enabling the provider your content authors will have a much smoother HTML5 editing experience, and your developers should have an incredible easy time customizing the experience for your content authors via plugins that are easy to write and maintain.  The following assumes you have completed all the steps of installing the Editor provider within your Ektron instance.

The first step is to locate the plugins directory, which can be found:
[Site Root]\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\

You should see the other following plugins located here:

  •  
  • Character Picker
  •  
  • Edit In Context
  •  
  • Format
  •  
  • Inspector
  •  
  • Library
  •  
  • Link
  •  
  • Source View
  •  
  • Table
  •  
  • Template
  •  
  • Translate
  •  
  • Validator
1.  Create another directory on the same level as above, this will be your new plugin's home. Lets use the classic 'HelloWorld' for a folder name.
 
2.  Inside this directory we need to create 3 additional directories to stay consistent with the architecture: css, img, lib
 
Your directory structure should now look like:
 
  •  
  • HelloWorld
  •  
    •  
    • css
    •  
    • img
    •  
    • lib
    •  
     
 
3. Inside the lib directory create a file called: helloworld-plugin.js. The name of this file is important and must be pluginname-plugin.js. Pase the follwing contents into this file:
 
 
// define the HelloWorld module using RequireJS
 
define([
 
    'aloha',
 
    'aloha/plugin',
 
    'aloha/floatingmenu',
 
    'aloha/jquery',
 
    'i18n!aloha/nls/i18n',
 
    'css!helloworld/css/helloworld.css'],
 
// callback executed once dependencies are loaded by RequireJS
 
    function (Aloha, Plugin, FloatingMenu, jQuery, i18nCore) {
 
        // create and register the Plugin
 
        return Plugin.create("helloworld", {
 
 
 
            defaults: {
 
                text: "Hello World!",
 
                wrapper: ''
 
            },
 
 
 
            init: function () {
 
                // executed on plugin initialization
 
                window.console.info("HelloWorld: Begin initialization");
 
                this.createButtons();
 
                window.console.info("HelloWorld: End initialization");
 
            },
 
 
 
            createButtons: function () {
 
                // provide locally scoped version of this for use in callbacks,e tc.
 
                var that = this,
 
                    tabInsert = i18nCore.t('floatingmenu.tab.insert');
 
 
 
                // create hellowworld button
 
                this.helloWorldButton = new Aloha.ui.Button({
 
                    'name': 'helloWorld',
 
                    'iconClass': 'ektron-aloha-button ektron-aloha-helloWorld',
 
                    'size': 'small',
 
                    'onclick': function () {
 
                        that.insertHello();
 
                    },
 
                    'tooltip': "Click to insert Hello World!",
 
                    'toggle': false
 
                });
 
 
 
                // add it to the floating menu
 
                FloatingMenu.addButton(
 
          'Aloha.continuoustext',
 
          this.helloWorldButton,
 
          tabInsert,
 
          1
 
        );
 
            },
 
 
 
            insertHello: function () {
 
                window.console.info("HelloWorld: Hello World Button clicked");
 
                var html = jQuery(this.settings.wrapper).text(this.settings.text);
 
                // get the current selection range
 
                var range = Aloha.Selection.getRangeObject();
 
                if (range.isCollapsed()) {
 
                    GENTICS.Utils.Dom.insertIntoDOM(html, range, jQuery(Aloha.activeEditable.obj));
 
                }
 
                else {
 
                    // remove the contents of the current selection
 
                    range.deleteContents();
 
                    // insert our Hello World elements
 
                    GENTICS.Utils.Dom.insertIntoDOM(html, range, jQuery(Aloha.activeEditable.obj));
 
                    // deselect the current range object
 
                    Aloha.getSelection().removeAllRanges();
 
                }
 
                return false;
 
            }
 
        });
 
    }
 
);

4. Create a file inside your css directory called helloworld.css, paste the following into it:

 

.helloworld {color: Maroon; font-family: Tahoma; font-size: 1.2em; font-weight: bold;}

.ektron-aloha-button {
background-repeat: no-repeat;
background-position: 0 0;
}

.ektron-aloha-button.ektron-aloha-helloWorld {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAANCSURBVBgZBcHbT1t1AMDx72lPKS29UCiz0BUMQxwwJptMSIAZzRgu6oOJ+jKjkQdjTAx/gI9mezAmJkb3ppKYqHsxe9oMOh0ZODd3xYVtFOLK1dG0pYWensvv4udjaK0BAACYmp8cAz4GjgEtgAmUgeta6XNfjn33CwAAgKG1BmBqftIEpoE3X8+cCCZCLVSsBiwXhLQRPOHy1iUhhfxVCPn2N6d+2gMwtNZMzU8GgD8Gk30jJzMvUbGDOLgsVwzqdJCCpdDCJYTFlnOVm5s3F4Qnjv/w1oWyDwCYPtrcPTLaNkhRung+AyF81EQdFnUUnSDbdoj1coD2yAsMpp497DrejwD+0vjqKPDZ6e7X/PdllS1q1JRgz45QdAJUbMhu7FKuVgkmChjxLMPJg1xevNH5/fXpe/6hySNfTLQNHTL8IbZ8AvQ+WmWEW0/81Gwfixt7qPoSwY5HOLEseVXCLEkONWd8tx4/bDKBY5lYmrvWJvl6H73+AygEuW0X264RT2kqTTMsqx1wNI0iSDbvcOLpo3iO6DeB5rDZQM7aZNuxiIY72XGjlEqKeIvNvoRFXg6QvnMOaVfJZw5S3AkTCUXxXNHo01obhgbXqaCtVkxPcukvD6M+xNayydpqjDYnhPA0+5M9BJfv4Nk10BohhGFKoYoVt5Ju9jcSrX+O9byJ7QVoVR8RD0ucDY/dnCDd1EVPaohdu8rC+u8UqxNIocqm8MTtx8XVdFc4w2//zdMY7qLOn0Eol/G+95BaIZVEodksr9G/f4Q9t8YnFz4Euh/4PFd89fPDWdERacG0NigX/iSRcLCFi9SKXCHLv4UlVvKL7NQK5IorDGTGeCb1PLuBe6O+b189P+M63sWZxVleTA8Q9zeQiChsYSOk4KlYO6lYB63xTgL+EC3RNLfX5rm2csOyXGImgOd471zJ3p1zau7hiSPHebRt8o9wmL72Oa5ysYXLgWQvw50n+Ts3x5WlWScs23uWz2ZrhtYagFe+fjkqPHFeeHL83ZH3TWQKrcMYPoNkvMKnF0/T1zrM1aW53Qbd3rtwZmkdwNBaAwAAMHJm6A0p5AdSqn4lVQIAKO/47yeFIlBTMrB9VgsAgP8BON24AjtZfcoAAAAASUVORK5CYII=);
}

5. Now we must enable the plugin to your content authors. You can choose which editing environment this plugin shows, eg. Content, Blogs, Library etc. Locate and open ektron.cms.framework.ui.config in your site root and navigate to approximately line #55. This XML structure handles 10 different Editor load scenarios for your content authors, and lets you define which plugin gets loaded where. Decide where you would like to view your plugin, and following the structure enter 'ektron/helloworld' (ektron being the directory, and helloworld being the plugin name).

If you added it to the 'Content' key, the path should now equal 'common/dom-to-xhtml,ektron/format,common/contenthandler,ektron/library,ektron/table,common/list,ektron/link,common/highlighteditables,common/undo,common/paste,ektron/characterpicker,common/horizontalruler,common/abbr,ektron/inspector,ektron/translate,ektron/validator,ektron/template, ektron/helloworld'.

You should now be seeing and able to insert the text "Hello World!" into your editor upon button click!