Add style to HTML editor

Questions
1

Hi,

Is it possible to add style-options to the html editor? I’m looking for a way that the user can simple add a pre-defined class to any element.

Litium version: 7

2

https://docs.litium.com/documentation/get-started/configure/configure-the-html-editor

3

Thanks, I will try it out. Is it the same configuration in Litium 7? I am currently working on the beta version.

4

This configuration should be the same in V7 maybe with maybe minor adjustments.

5

I have tried to add a file at ~site/cms/editor/styles.js but I cant see any new styles in the html-editor. Should the file be placed anywhere else?

6

Did you solve this?

7

No, still the same…

8

I tried the example from Docs and it works fine, maybe some code is wrong in your js file.
You can add your js content here so we can check it (if not too long).

9

I did copy the js example from the docs and created a file styles.js and added it to the folder Site/CMS/Editor.

CKEDITOR.stylesSet.add('litium',
    [
        // Block-level styles
        { name: 'Blue h2', element: 'h2', styles: { 'color': 'Blue' } },
        { name: 'Red h3', element: 'h3', styles: { 'color': 'Red' } },

        // Inline styles
        { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
        { name: 'Marker: Green', element: 'span', styles: { 'background-color': 'Green' } }
    ]);
10

Works fine in my solution, I just Rebuilded the solution and it’s there.

HtmlEditor
HtmlEditor.png1728×1080 94.6 KB

11

Are you using Litium 7?

12

No you chosed Litium 6.2.1 at the end of your query on top.

13

Ok, I can see that I was not clear in the first post. This issue is in Litium 7

14

Ok then, this is a bug in V7 and product team know about it :slight_smile:

15

Ok, thanks for info.

16

@emilsjog I don’t know if this helps but in our Litium 6.2 this is what I did to have it work the way I wanted.
As you’ve discovered the correct place for the files should be ex. “/Site/CMS/Editor/config.js” which was a bit unclear for me after reading the documentation (could be updated now).

I did a sass file that imported a subset of my styles (the one that makes sense in the editor) and had it be compiled into “/Site/CMS/Editor/editor.css”.

The only way I was able to alter the configuration of CKEditor was if I reconfigured it entirely in my “config.js” file, so I copied the configuration Litium does and made some changes:

CKEDITOR.editorConfig = function (config) {
  config.resize_minWidth = 500;
  config.resize_minHeight = 500;
  //config.skin = 'litiumCustom';
  config.templates_replaceContent = false;
  config.extraPlugins = "iframedialog,netspell";//,divarea";
  config.coreStyles_bold = { element: 'b', overrides: 'strong' };
  config.coreStyles_italic = { element: 'i', overrides: 'em' };
  config.allowedContent = true;
  config.toolbar = [
    ['Cut', 'Copy', /*'Paste',*/ 'PasteText', 'PasteFromWord', '-', 'SpellChecker'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', /*'Flash',*/ 'Templates', 'Table', 'HorizontalRule', 'SpecialChar'],
    ['Maximize', 'ShowBlocks'],
    '/', ['Styles'],
    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['NumberedList', 'BulletedList'/*,  '-', 'Outdent', 'Indent'*/],
    ['Source']
  ];
  config.toolbarCanCollapse = true;
  config.templates_files = [
    '/Site/Cms/Editor/templates.js'
  ];
};

The changes I did was the following;

  1. Remove unnecessary buttons like “flash” and stuff you don’t want the editors to add…
  2. Removed the plugin “divarea”. This plugin changes so CKEditor is rendered in a “div” instead of an “iframe”. The problem with having it as a div, is that the styling from Litium Backoffice will leak into your editor and make your “editor.css” hard to get right.
17

This was confirmed a bug. Anyone know if it’s fixed in Litium 7?

19

The bug didn’t make it for the 7.0.0 release but is fixed and will be included in next minor release included updated instructions on docs site.

Release date: TBD

20

Edit: I missunderstood the part of “minor release” as 7.0.1, works great now in 7.1.0
We have tried adding some easy styles and it hasn’t worked in 7.0.1 for us:

Litium.Accelerator.Mvc/Site/Editor/styles.js:
CKEDITOR.stylesSet.add( ‘litium’,
[
// Inline styles
{ name: ‘Font: Amatic’, element: ‘p’, styles: { ‘font-family’: ‘“Amatic SC”’ } },
{ name: ‘Font: Lato’, element: ‘p’, styles: { ‘font-family’: ‘“Lato”’ } },
{ name: ‘Font: Open Sans’, element: ‘p’, styles: { ‘font-family’: ‘“Open Sans”’ } }
]);

21

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