[CKEditor]  Problem customizing the toolbar

Forge Component
(25)
Published on 8 May by Leonardo Fernandes
25 votes
Published on 8 May by Leonardo Fernandes

I am trying to customize the toolbar using https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic. The problem is that the options I placed are not displayed.

"toolbarGroups: [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ]"

I'm using the following version

Check the JavaScript console for errors, a lot of times it's a JSON error and it's not parsing right.

J.Ja

Hi,

Is that entire configuration you passed? Some of them needs plugin to be added to component.

Regards.

Hi,

Sorry was busy till today. Looks like the buttons are removed in configuration (at least in demo app it was).

removeButtons : 'Source,Save,NewPage,Preview,Print,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Flash,Iframe,About',

moment I removed Source,save,NewPage etc from the line above I was able to see those buttons.

Regards.

Hi, I'm having a similar situation. My JSON in attached below, the tag I'm needing to use, but it's not being shown is the "TextColor". There's no error on the browser console.


SyntaxEditor Code Snippet

"toolbar: [
        { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
        { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
        '/',
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
        '/',
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        { name: 'about', items: [ 'About' ] }
    ]"

An additional comment that may be useful: Version 5.0.2 works just fine.

Hi,

I am not 100% sure but my assumption is it needs colorbutton add-on for CKEditor v4. You can clone the module and add the add-on or use https://www.outsystems.com/forge/component-overview/7146/ckeditor-advance

Regards.