Блог

Главная - Вопросы по программированию - Как CKEditor 5 работает на Next.JS ?

Как CKEditor 5 работает на Next.JS ?

#javascript #reactjs #ckeditor #next.js

#javascript #reactjs #редактор #next.js

Вопрос:

У меня есть следующая проблема:

Необработанная ошибка времени выполнения Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или, возможно, перепутали импорт по умолчанию и именованный импорт. Проверьте метод рендеринга Resumos .

Эти разные решения не сработали:

Решение 1:

 
import dynamic from "next/dynamic";

const { CKEditor } = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-react');
  },
  { ssr: false }
);

const {ClassicEditor} = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-build-classic');
  },
  { ssr: false }
);

const Resumos = ({id}) => {
  <CKEditor 
       editor={ ClassicEditor }
       data={textoResumoAluno}
       onChange={handleChangeTextoResumoAluno}
  />
}

Решение 2:

 const Resumos = ({id}) => {
    const editorRef = useRef()
    const [ editorLoaded, setEditorLoaded ] = useState( false )
    const { CKEditor, ClassicEditor } = editorRef.current || {}

    useEffect( () => {
        editorRef.current = {
          CKEditor: require( '@ckeditor/ckeditor5-react' ),
          ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' )
        }
        setEditorLoaded( true )
    }, [] );


{editorLoaded ? ( 
      <CKEditor
           editor={ ClassicEditor }
           data={textoResumoAluno}
           onInit={ editor => { /*You can store the "editor" and use when it is needed.
                 console.log('Editor is ready to use!', editor)*/
            }}
           onChange={handleChangeTextoResumoAluno}
       /> 
  ) : (
          <div>Editor loading</div>
  )}
}

Комментарии:

1. Проверьте эти пакеты. Они дают хорошее представление о том, что экспортируется. Один называется export, другой — экспорт по умолчанию. Это не тот случай, когда нужно методом проб и ошибок. Первое не будет соответствовать комментарию. Второй будет CKEditor: require( '@ckeditor/ckeditor5-react' ).CKEditor, ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' ).default .

2. Спасибо! Это помогло мне найти решение

Ответ №1:

Спасибо @EstusFlask, это помогло мне найти решение!

 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>}
     </>
     )
}