Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
501 views
in Technique[技术] by (71.8m points)

javascript - CKEditor 5 Custom Build - When integrated with React causing the below error

I have created custom build with necessary plugins from Online Builder. I wanted Placeholder feature as well so followed CKEditor 5 Inline widget docs. It is working fine in Html file

But, When I use the same build/ckeditor.js in React using @ckeditor/ckeditor5-react, It is causing the below error.

TypeError: Cannot add property name, object is not extensible
at new o (ckeditor.js:76)
at Function.rethrowUnexpectedError (ckeditor.js:94)
at El.fire (ckeditor.js:1367)
at El.addMany (ckeditor.js:1513)
at El.add (ckeditor.js:1505)
at Zd (ckeditor.js:22251)
at rh._createGroupedItemsDropdown (ckeditor.js:22497)
import React, { useState } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';

const editorConfiguration = {
  toolbar: {
    items: [
      'heading',
      '|',
      'fontSize',
      'fontFamily',
      '|',
      'bold',
      'italic',
      '|',
      'alignment',
      '|',
      'numberedList',
      'bulletedList',
      '|',
      'indent',
      'outdent',
      '|',
      'link',
      'blockQuote',
      'imageUpload',
      'insertTable',
      'mediaEmbed',
      '|',
      'undo',
      'redo',
      'placeholder',
    ],
  },
  image: {
    toolbar: ['imageTextAlternative', 'imageStyle:full', 'imageStyle:side'],
  },
  table: {
    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
  },
  placeholderConfig: {
    types: ['Name', 'DOB'],
  },
};

const CKEditor = (props: CKEditorProps) => {
   const [content, setContent] = useState(props.value || '');

  return (
    
      <CKEditor
        editor={Editor}
        config={editorConfiguration}
        data={content}
        onChange={(event, editor) => {
          setContent(editor.getData());
          props.updateFormData(content);
        }}
        onInit={editor => {
          window.editor = editor;
        }}
      />
  );
};

export default CKEditor;
question from:https://stackoverflow.com/questions/65949809/ckeditor-5-custom-build-when-integrated-with-react-causing-the-below-error

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...