Hi Claudia,

AFAICS there are a few errors in the configuration. For example "elemento" should be "element" and the structure has some issues. You can try the following:

{

  toolbar: [

    ['Source', '-', 'Preview'],

    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'],

    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv'],

    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'],

    ['Link', 'Unlink', 'Anchor'],

    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'],

    ['TextColor', 'BGColor'],

    ['Styles'] 

  ],

  stylesSet: [

    {

      name: 'Lista decimal aninhada',

      element: 'ol',

      attributes: { 'class': 'bdp-ckeditor-lista-decimal-aninhada' }

    }

  ]

}

Or you can simply use pure CSS without having to include that in the CKEditor's configuration, I would personally go with this approach, unless there's a specific need for that.

I hope this helps!

Thanks for the reply.

Can you help me define an approach using only pure CSS? Is it possible to use this in CKEditor afterwards?

I need to create a bulleted list with three levels, but CKEditor only allows two levels, like this

1. Nivel 1

    1.1 Nivel 2

         1.1.1 Nivel 3

    1.2 Nivel 3

2. Nivel 1

I tried using CSS by adding a menu style. However, when I try to apply the CSS associated with that style, it doesn't work.

Thanks

Hi @Claudia Moutão

If you are using  CKEditor 4 Forge component, inject below js into the  after initialization of Ck editor:

CKEDITOR.on('instanceReady', function(evt) {

    var editor = evt.editor;

    editor.document.appendStyleText(`

        ol ol ol {

            margin-left:40px !important;

            list-style-type: lower-roman !important;

        }

    `);

});

This is usually the most reliable approach in OutSystems 11 because CKEditor runs inside its own editable area and page-level CSS often does not reach the editor content.

Thank you for your reply.

I put the indicated solution in the OnReady event of the ckeditor but it didn't work.

I need the second list to have the id of the first list on the left separated by a dot, like in the example: 1 level 1, 1.1 level 1 + . + Level 2

thanks