How to configure Ckeditor Toolbar in React JS?

Question

I wanted to configure the Ckeditor toolbar in React, but I don't know where is the property details in the documentation. Ckeditor React integration documentation didn't help because it doesn't contain much information.

I tried this :

import CKEditor from "ckeditor4-react"

<CKEditor
          data={this.state.data}
          onChange={this.onEditorChange}
          config={{
            toolbar: [
              ["Bold", "Italic", "Strike Through"],
              [
                "Cut",
                "Copy",
                "Paste",
                "Pasteasplaintext",
                "FormattingStyles",
                "Undo",
                "Redo"
              ],
              ["List", "Indent", "Blocks", "Align", "Bidi", "Paragraph"],
              ["Find", "Selection", "Spellchecker", "Editing"]
            ]
          }}
        />

But some of these configurations didn't show up because I was guessing the property. I know there is toolbar configuration generator in documentation, but I don't know where to put this in React :

CKEDITOR.editorConfig = function( config ) {
    config.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' ] }
    ];

    config.removeButtons = 'Source,Save,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,RemoveFormat,CreateDiv,BidiLtr,BidiRtl,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,About';
};

GiaGandi · Accepted Answer · 2019-10-15 15:59:05Z

23

I use it like this:

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

   <CKEditor
        data={input.value}
        editor={ ClassicEditor }
        config={{         
          toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
            'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
        }}     
      />

The full list of toolbar options is there:

*["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]*

answered Oct 15, 2019 at 15:59

GiaGandi

3753 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

r_zelazny Over a year ago

Do you know how to add the codeBlock plugin? When I add a plugins: [codeBlock] and toolbar: ['codeBlock'] to my config item I get some CKEditor 5 modules are duplicated. error. I imported the plugin as import CodeBlock from ''@ckeditor/ckeditor5-code-block/src/codeblock';

Taffarel Xavier Over a year ago

I've that problem.

Collectives™ on Stack Overflow

How to configure Ckeditor Toolbar in React JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related