ckeditor5 error "toolbarview-item-unavailable" on React

777 views Asked by At

I am using CkEditor5 on my React project, it works fine but I cannot use additional features, gives me error toolbarview-item-unavailable.

After configuring with the online builder, I unzipped the zip file, copied the ckeditor.js file under the build folder, and pasted it into my node_modules folder.

enter image description here

enter image description here

What should I do to upload pictures to my React app?

Features I got

enter image description here

Features I want to get

enter image description here

it's my code.


import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 
...
...

 const editorConfiguration = {
    
    toolbar: {
      items: [
        'heading',
        '|',
        'fontSize',
        'fontFamily',
        'fontColor',
        'fontBackgroundColor',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'highlight',
        'removeFormat',
        '|',
        'alignment',
        '|',
        'numberedList',
        'bulletedList',
        '|',
        'indent',
        'outdent',
        '|',
        'todoList',
        'link',
        'imageUpload',
        'blockQuote',
        'insertTable',
        '|',
        'undo',
        'redo'
      ]
    },

    ...
    ...

 return (
    <>
    ...
    ...
          <div className={`col-12 col-lg-${span.inputColSpan + 3}`} id="editor">
            <CKEditor
              name={option.name}
              editor={ClassicEditor}
              data={content}
              onChange={handleCkeditorState}
              onReady={(editor) => {
                console.log('editor init..', editor);
              }}
              OnBlur={(event, editor) => {
                console.log('Blur Editor', editor);
              }}
              onFucus={(event, editor) => {
                console.log('Focus Editor', editor);
              }}
              config={editorConfiguration}
            />

          
      </div>
    </>
  );
};
import {Editor as ClassicEditor} from '@ckeditor/ckeditor5-build-classic';
or
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

tried the above import method, but the editor does not open and comes out as a blank screen.

0

There are 0 answers