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