如何在 React App 中使用 Codeblock 插件显示 CKEditor

Question

我正在寻求帮助以解决 React 中 CKEditor5 的一个非常具体的问题。 我能够在我的 React 项目中实现基本的 CKEditor5，代码就在这里： （代码可能不干净，我正在自学React，自己做一些项目，我还没有所有的概念，所以请尽可能理解。）

import React, {useState, useEffect} from 'react';
import { useParams } from "react-router-dom";
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const Edittuto = () => {

    const [title, setTitle] = useState<any>('');
    const [text, setText] = useState<any>('');
    const { id } = useParams();
  
    useEffect(() => {
      console.log("UseEffect")
  
      const editorPlaceholder = document.querySelector( '#editor' ) as HTMLElement;
  
      ClassicEditor
        .create( editorPlaceholder, {
        })
  
      [...]
    }, [])
  
    const handleUpdate = (event: any) => { ... }
  
    const handleSubmit = (event: any) => { ... }
  
    return (
      <div className="container edit-container">
        <div className="row">
          <div className="col">
            <h1 className="text-center">Edit un tutoriel</h1>
            <form>
              <div className="form-group">
                <label htmlFor="titre">Titre du tutoriel</label>
                <input type="text" name="titre" className="form-control" id="titre" value={title} onChange={handleUpdate} placeholder="Titre du tutoriel" />
              </div>
              <div className="form-group">
                <label htmlFor="contenu">Contenu du tutoriel</label>
                <div className="ckeditor">
                  <div id="editor"></div>
                </div>
              </div>
              <button type="button" onClick={handleSubmit} className="btn btn-primary">Ajouter</button>
            </form>
          </div>
        </div>
      </div>
    );
  };
  
  export default Edittuto;

所以我的 CKEditor 显示正常，这边没问题。但是，我没有添加代码的选项。据我所见，我需要安装插件（https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html）

所以我按照这个插件的集成教程，我必须修改某些地方的代码（标记为 //--Changed:

import React, {useState, useEffect} from 'react';
import { useParams } from "react-router-dom";
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; //--Changed
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; //--Changed

const Edittuto = () => {

    const [title, setTitle] = useState<any>('');
    const [text, setText] = useState<any>('');
    const { id } = useParams();
  
    useEffect(() => {
      console.log("UseEffect")
  
      const editorPlaceholder = document.querySelector( '#editor' ) as HTMLElement;
  
      ClassicEditor
        .create( editorPlaceholder, {
          plugins: [ CodeBlock ], //--Changed
        })
  
        [...]
    }, [])
  
    const handleUpdate = (event: any) => { ... }
  
    const handleSubmit = (event: any) => { ... }
  
    return (
      [...]
    );
  };
  
  export default Edittuto;

但是，我遇到了一个bug，我的CKEditor根本不显示，当我执行console.log()看它是否被初始化时，它告诉我它是。 有没有人以前在 React 中使用过 CKEditor5，可以告诉我问题可能来自哪里？如果没有，是否有带有代码块选项的 WYSIWYG 替代方案？

我真的很想解决这个bug，我做了互联网研究，但我还没有真正找到解决方案。 如果有帮助，项目已经用 Vite 初始化了。