I am using ckeditor and I am wondering what is the right way to manage the it in React.JS.
My current workaround
I am following this tutorial to install ckeditor to my project by running npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic.
In App.js
return(
<CKEditor
editor={ ClassicEditor }
config={
{
toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo'],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
}
}
data={content}
onReady={ editor => {
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log( { event, editor, data } );
} }
/>
)
After that, I find that I need to use insert image function which require plugin Base64 image upload adapter.
I am thinking of using below way do it after I've made some research:
Download the ckeditor5-build-classic-stable and modify src/ckeditor.js according to this tutorial, and then let it refer to my node_modules in my project.**
But I find it having some drawbacks, such as requiring to run npm run build when I want to view the changes.
Any suggestions?