Configure the HTML editor

The HTML editing tool in Litium is CKEditor. There are several ways to customize how the editor appears in the UI. You can configure:

• style sets in wwwroot/Site/Editor/styles.js. See CKEditor.com for more information.
• content CSS in wwwroot/Site/Editor/editor.css. This sets the style for editor content. See CKEditor.com for more information.
• the config file wwwroot/Site/Editor/config.js. See CKEditor.com for more information.
• template files in wwwroot/Site/Editor/templates.js. See CKEditor.com for more information.

In wwwroot/site/editor you can create a JavaScript file named config.js that will be loaded and executed before other configuration files. This will affect all websites with the same codebase. It enables settings like telling the editor to keep non-text formatting HTML tags such as script:

var originalConfig = CKEDITOR.editorConfig;
CKEDITOR.editorConfig = function (config) {
    originalConfig(config); // to keep the default config
    config.allowedContent = true;
};

Defining your own styles

When you define your own styles for the editor, the style-set name litium should be used in the configuration file. Style sets are configured in wwwroot/Site/Editor/styles.js. If this file exists, it will be loaded.

CKEDITOR.stylesSet.add( 'litium',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);

Read more about applying styles to editor content at CKEditor.com.

Defining your own templates

When you define your own templates, the template-set name default should be used in the configuration file. Templates are configured in wwwroot/Site/Editor/templates.js. If this file exists, it will be loaded.

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
         // The name of the subfolder that contains the preview images of the templates.
         imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ), 
 
         // Template definitions.
         templates :
                  [
                          {
                                   title: 'My Template 1',
                                   image: 'template1.gif',
                                   description: 'Description of My Template 1.',
                                   html:
                                            '<h2>Template 1</h2>' +
                                            '<p><img src="/logo.png" style="float:left" />Type your text here.</p>'
                          },
                          {
                                   title: 'My Template 2',
                                   html:
                                            '<h3>Template 2</h3>' +
                                            '<p>Type your text here.</p>'
                          }
                  ] });

Read more about templates at CKEditor.com.

Defining your own content style sheet (CSS)

Styles are configured in wwwroot/Site/Editor/editor.css. If this file exists, it will be loaded. Here is an example of a style sheet that will remove the underline from the anchor tag in the editor:

Anchor tags are usually underlined. We can configure a custom style sheet for editor content to remove that, by setting text-decoration to none in wwwroot/Site/Editor/editor.css.

a {
	text-decoration: none;
}

This feature is provided through a CKEditor plug-in that is not included by default, so we need to install it. This is done as follows:

• Download the plug-in at CKEditor.com.
• Extract the zip file and copy it to Litium Accelerator so that the the plugin.js file is in the wwwroot/Site/Editor/plugins/stylesheetparser folder.
• To tell CKEditor where to find the stylesheetparser plug-in. To load it, create a config.js file under wwwroot/Site/Editor/ with the following content:

CKEDITOR.plugins.addExternal('stylesheetparser', '/Site/Editor/plugins/stylesheetparser/');
var originalFn = CKEDITOR.editorConfig;
CKEDITOR.editorConfig = function (config) {
    originalFn(config);
    config.extraPlugins += ',stylesheetparser';
};

Anchor tags in the editor will no longer be underlined.

Using native browser spell checker

The spelling dictionaries functionality was removed from the CKEditor in Litium 7.4 version.
Instead, the native browser spell check functionality was enabled in the CKEditor.

• Use the config.disableNativeSpellChecker configuration option to disable/enable it.

  CKEDITOR.editorConfig = function (config) {
      config.disableNativeSpellChecker = false;
  };
  

• To use the native browser spell check functionality in the CKEditor you need to enable spell check in your browser.

  Note: The spell check functionality is not available natively for all browsers.

• Misspelled words will be underlined. 
• You have to press the Ctrl key when right-clicking misspelled words to see the suggestions.

  

• If you need to change or add a new language, please check the "Language" settings in your browser.

Using iframe

Litium 8.12 and later versions are using CkEditor 4.21.0, where iframe elements are sanboxed to secure web pages. This restricts JavaScript code execution in the iframe element. To allow JavaScript execution in iframe elements, iframe_attributes should be configured. Here is an example wwwroot/Site/Editor/config.js file which allows embeded Youtube videos:

var originalConfig = CKEDITOR.editorConfig;
CKEDITOR.editorConfig = function (config) {
    originalConfig(config); // to keep the default config
    config.iframe_attributes = function (iframe) {
        var youtubeOrigin = 'https://www.youtube.com';

        if (iframe.attributes.src.indexOf(youtubeOrigin) !== -1) {
            return { sandbox: 'allow-scripts allow-same-origin' };
        }

        return { sandbox: '' };
    };
};