Adding plugins to the HTML-editor

Questions
1

I’m trying to add the color button but it wont work. Anyone that has installed any plugin to the editor?

Litium version: 7.1

2

Disclamer: This is an old guide about adding code editor plugin into CKEditor that i created back in 2014, adding other plugins should work on the same way. I have not test this guide with Litium 7 but it is running fine with older versions of Litium and the implementation of the CKEditor have not been changed.

Code editor and syntax highlighting inside Litium

The editor that are used inside Litium are CKeditor and that editor are rely great editor for regular text content but if you need to include some code-sample it is hard to get that formatted correctly and no built in syntax highlighter exists. To get better support for code-samples you can add the pbckcode plugin that will handle the code formatting issue inside the editor and create html that are compatible with multiple syntax highlighter.

The CKEditor is included in Litium and you should not touch the files inside Litium-folder where the CKEditor exists to get easily upgrades of the Litium product so the regular guide how you should add the pbckcode plugin into CKEditor will not then work, that’s the reason I have created this guide instead.

How to install plugins into CKEditor without placing the code in the editor default plugins folder

  1. Download the plugin-code and extract the files, example the pbckcode plugin are found here(http://ckeditor.com/addon/pbckcode).
  2. Copy the extracted files into your Litium installation; place them inside /site/editor
  3. Inside /site/editor create an JavaScript configuration file with name globalConfig.js with the following content, this configuration file will automatic be loaded by Litium if it exists.
//load plugin from folder that not exits in default `Litium/Editor/plugins`‐folder
(function () {
    CKEDITOR.plugins.addExternal('pbckcode', '/site/editor/pbckcode/', 'plugin.js');
})();
// change the configuration of CKEditor to also add the pbckcode‐plugin
(function () {
    var old = CKEDITOR.editorConfig;
    CKEDITOR.editorConfig = function (config) {
        old(config);
        // CKEDITOR PLUGINS LOADING
        config.extraPlugins += ',pbckcode';
        // CKEDITOR TOOLBAR CUSTOMIZATION
        config.toolbar.push(['pbckcode']);
        config.allowedContent = true;
        // PBCKCODE CUSTOMIZATION
        config.pbckcode = {
            // An optional class to your pre tag.
            cls: '',
            // The syntax highlighter you will use in the output view
            highlighter: 'HIGHLIGHT',
            // An array of the available modes for you plugin.
            // The key corresponds to the string shown in the select tag.
            // The value correspond to the loaded file for ACE Editor.
            modes: [
                ['C#', 'csharp'],
                ['HTML', 'html'],
                ['CSS', 'css'],
                ['JS', 'javascript'],
                ['JSON', 'json'],
                ['Powershell', 'powershel1'],
                ['SCSS/Sass', 'scss'],
                ['SQL', 'sql'],
                ['Text', 'text'],
                ['XML', 'xml']
            ],
            // The theme of the ACE Editor of the plugin.
            theme: 'textmate',
            // Tab indentation (in spaces)
            tab_size: '4'
        };
    }
})();
  1. The editor have now got the new pbckcode-editor, you will find that as a button in the toolbar

Adding syntax highlighting to the public site

I made some evaluation about the syntax highlighter I was finding; both client side and server side, with different result and the one that was working best for my scenarios was the highlight.js from highlightjs.org that will work on client side but will require that browser are supporting JavaScript; but who use a browser without JavaScript support today?

  1. Download the highlight js from highlightjs.org and unpack the files.
  2. Copy the styles themes from the styles-folder into your web site.
  3. Include the style themes for the highlight js that you should use (you can only inlcude one stylesheet at the time)
  4. Copy the JavaScript file highlight.pack.js into your web site.
  5. Include the JavaScriptfile into your JavaScript-bundle or add the scripttag on the page itself.
  6. On the page or in the master layout where you initiate your startup JavaScript you should add the following line that will trigger the highlighting to kick in
hljs.initHighlightingOnLoad();
1 Like
3

I did manage to install the pbckcode-plugin. But when I added the colorbutton it didn’t show up. And I saw that the plugin has dependencies to other plugins that I might need. Is it possible to see if any of them already is installed?

4

Got it working, with the following globalConfig.js

//load plugin from folder that not exits in default `Litium/Editor/plugins`‐folder
(function () {
    CKEDITOR.plugins.addExternal('button', '/site/editor/button/', 'plugin.js');
    CKEDITOR.plugins.addExternal('panel', '/site/editor/panel/', 'plugin.js');
    CKEDITOR.plugins.addExternal('panelbutton', '/site/editor/panelbutton/', 'plugin.js');    
    CKEDITOR.plugins.addExternal('floatpanel', '/site/editor/floatpanel/', 'plugin.js');    
    CKEDITOR.plugins.addExternal('colorbutton', '/site/editor/colorbutton/', 'plugin.js');
})();
// change the configuration of CKEditor to add the plugins
(function () {
    var old = CKEDITOR.editorConfig;
    CKEDITOR.editorConfig = function (config) {
        old(config);
        // CKEDITOR PLUGINS LOADING        
        config.extraPlugins += ',button,panel,floatpanel,panelbutton,colorbutton';
        config.toolbar.push({ name: 'colors', items: ['TextColor', 'BGColor'] });
        config.toolbarGroups = [{ name: 'colors' }];
    }
})();
2 Likes
5

The config.extraPlugins in the configuration will contains the plugins that is installed.