entonces mi código es:
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; así que el problema es que solo quiero el Paraghraph en mi editor, pero cuando ejecuto este código devuelve CKEditorError: ckEditor-duplicated-modules También intenté agregar .Paragraph delante de la importación para el párrafo, ¿hay algún problema con el código?
Nota siguiente js 12
el mejor consejo es usar next/script , supongo.
import Script from "next/script"; ... <Script ... />Porque importará CKEditor de una manera diferente "fuera" de las librerías de NextJs.
O prueba de esta manera:
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>Referencia de integración de React ckEditor: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
Referencia de configuración: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html
Prueba esto y mantenme en contacto. ¡Espero que este consejo resuelva el problema!