Configure the HTML editor

This section contains instructions on how to define styles and templates for a site.

  • Configuration is done with the new format that is used in ck-editor (the old files from fck-editor cannot be used).
  • webSiteId is the ID for the website without hyphen (-) and brackets ({ or }).

Defining your own configuration

When defining your own configuration for a site you should use a configuration file for the area.

  • Style sets are configured in /Site/[module]/Editor/config.js.
  • The Websites area can have different configuration files for each website, webSiteId is used in the file name.

If the file /site/CMS/Editor/config_[websiteid].js exists, it will be loaded instead of the above file.

In /Site/Editor you can create a javascript file named globalConfig.js that will be executed together with the rest of the configuration files to enable site specific settings, for example CKEDITOR.config.allowedContent = true to tell the editor not to strip away non-text formatting html tags like script.

Defining your own styles

When defining your own styles for a site you should use the style set name litium in a configuration file for the area. The configuration is described in http://docs.ckeditor.com/#!/guide/dev_styles.

  • Style sets are configured in /Site/[module]/Editor/styles.js
  • The Websites area can have different configuration files for each website, webSiteId is used in the file name.

If the file /site/CMS/Editor/styles_[websiteid].js exists, it will be loaded instead of the above file. 

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' } }
]);

Defining your own templates

When defining your own templates for a site you should use the template set name default in a configuration file for the area. The configuration is described in https://docs-old.ckeditor.com/CKEditor_3.x/Developers_Guide/Templates.

  • Templates are configured in /Site/[module]/Editor/templates.js with the template name default.
  • The Websites area can have different configuration files for each website, webSiteId is used in the file name.

If the file /site/CMS/Editor/templates _[websiteid].js exists, it will be loaded instead of the above file.

// 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>'
                          }
                  ] });

Defining your own content style sheet (CSS)

When defining your own content style sheets for a site you should use the stylesheet file for the area.

  • Styles are configured in /Site/[module]/Editor/editor.css.
  • The Websites area can have different configuration files for each website, webSiteId is used in the file name.

If the file /site/CMS/Editor/editor_[websiteid].css exists, it will be loaded instead of the above file.

Is this page helpful?
Thank you for your feedback!