so my code is:
import { useEffect, useState, useRef } from "react";
function TextEditor({ token }) {
const editorRef = useRef();
const [editorLoaded, setEditorLoaded] = useState(false);
const { CKEditor, ClassicEditor } = editorRef.current || {};
const [data, setData] = useState("");
useEffect(() => {
editorRef.current = {
CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
Paragraph: require("@ckeditor/ckeditor5-paragraph/src/paragraph"),
};
setEditorLoaded(true);
}, []);
return (
<div className="bg-[#F8F9FA] h-5/7 overflow-y-scroll max-w-6xl mx-auto">
{editorLoaded ? (
<CKEditor
editor={ClassicEditor}
data=""
config={{
plugins: [Paragraph],
toolbar: ["bold", "italic"],
}}
onReady={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setData(data);
}}
/>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default TextEditor;
so the problem is I only want the Paraghraph in my editor but when I run this code it returns CKEditorError: ckEditor-duplicated-modules I have also tried to add .Paragraph in front of the import for the paragraph is there something wrong with the code
Note next js 12
best tip is use next/script I guess.
import Script from "next/script";
...
<Script ... />
Because you will import CKEditor in a different way "outside" NextJs libs.
OR try this way :
const Resumos = () => {
const editorRef = useRef()
const [ editorLoaded, setEditorLoaded ] = useState( false )
const { CKEditor, ClassicEditor} = editorRef.current || {}
useEffect( () => {
editorRef.current = {
CKEditor: require( '@ckeditor/ckeditor5-react' ).CKEditor, //Added .CKEditor
ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' ),
}
setEditorLoaded( true )
}, [] );
const [data, setData] = useState('');
return(
<>
{editorLoaded ? <CKEditor
editor={ ClassicEditor }
data={data}
onReady={ editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
} }
onChange={ (event, editor ) => {
const data = editor.getData()
setData(data);
} }
/> : <p>Carregando...</p>}
</>
)
}
<CKEditor
...
config={{
removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
}}
...
>
</CKEditor>
<CKEditor
...
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
...
>
</CKEditor>
React ckEditor integration reference: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
Config reference : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html
Try this and keep me in touch. Hope this tip solves the problem!