React集成CKEditor自定义工具栏报错：Cannot read property of null

我在React项目中配置CKEditor自定义工具栏，按需求安装了核心包及相关依赖，但遇到如下TypeError错误导致无法推进，多方搜索仍未找到解决思路，恳请技术建议。

错误信息 #

ckeditor.jsx:376 TypeError: Cannot read property of null (see 'getAttribute').
From IconView._updateXMLContent (iconview.js:100:1)
From IconView.render (iconview.js:76:1)
From IconView.js:204:1)
At IconView.Fire (152termixin.js:154:1)
In Marked by Render.js:volution:1)
From ViewCollection._Render View Collection Top Items (View Collection).js:204:1)
From ViewCollection.<br>(viewcollection.js:65:1)
From ViewCollection.Fire (152termixin.js:154:1)
In ViewCollection.addMany (collection.js:150:1)
ViewCollection.add (collection.js:118:1) {Step: 'Initialize', willEditorRestart: false}

我的代码 #

我参考官方文档的自定义指导逐步添加依赖，代码如下：

Editor.tsx #

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Font from '@ckeditor/ckeditor5-font/src/font';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import List from '@ckeditor/ckeditor5-list/src/list';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

interface EditorProps {
    data: any;
    onChange: (value: React.SetStateAction<any>) => void;
    uploadFolder: string;
    uploader: string;
}

const Editor = ({ data, onChange, uploadFolder, uploader }: EditorProps) => {
    return (
        <div>
            <CKEditor
                data={data}
                onChange={onChange}
                onReady={(editor: any) => {
                    editor.ui
                        .getEditableElement()
                        .parentElement.insertBefore(
                            editor.ui.view.toolbar.element,
                            editor.ui.getEditableElement(),
                        );
                }}
                editor={DecoupledEditor}
                config={{
                    placeholder: '请输入内容',
                    language: 'ko',
                    plugins: [
                        Essentials,
                        Paragraph,
                        Bold,
                        Italic,
                        Heading,
                        Indent,
                        IndentBlock,
                        Underline,
                        Strikethrough,
                        BlockQuote,
                        Font,
                        Alignment,
                        List,
                        Link,
                        PasteFromOffice,
                        Image,
                        ImageStyle,
                        ImageToolbar,
                        ImageUpload,
                        ImageResize,
                        Table,
                        TableToolbar,
                        TableProperties,
                        TableCellProperties,
                        TextTransformation,
                        SimpleUploadAdapter,
                    ],
                    toolbar: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        '|',
                        'fontSize',
                        'fontColor',
                        'fontBackgroundColor',
                        '|',
                        'alignment',
                        'outdent',
                        'indent',
                        'bulletedList',
                        'numberedList',
                        'blockQuote',
                        '|',
                        'link',
                        'insertTable',
                        'insertFileAndImage',
                        '|',
                        'undo',
                        'redo',
                    ],
                    fontSize: {
                        options: [
                            14,
                            15,
                            16,
                            17,
                            18,
                            19,
                            'default',
                            21,
                            22,
                            23,
                            24,
                            25,
                            26,
                            27,
                            28,
                            29,
                            30,
                        ],
                    },
                    alignment: {
                        options: ['justify', 'left', 'center', 'right'],
                    },
                    table: {
                        contentToolbar: [
                            'tableColumn',
                            'tableRow',
                            'mergeTableCells',
                            'tableProperties',
                            'tableCellProperties',
                        ],
                    },
                    image: {
                        resizeUnit: 'px',
                        toolbar: [
                            'imageStyle:alignLeft',
                            'imageStyle:full',
                            'imageStyle:alignRight',
                            '|',
                            'imageTextAlternative',
                        ],
                        styles: { options: ['full', 'alignLeft', 'alignRight'] },
                        upload: { types: ['JPEG', 'JPG', 'GIF', 'PNG'] },
                    },
                    simpleUpload: {
                        uploadUrl: '/uploadFile',
                        withCredentials: true,
                        headers: {
                            'upload-folder': uploadFolder || 'root',
                            'upload-editor': uploader || '',
                        },
                    },
                }}
            />
        </div>
    );
};
export default Editor;

app.tsx #

<div className="editor-container">
      <Editor
        data={content}
        uploadFolder="Test"
        uploader="bloodseeker"
        onChange={(event, editor) => {
          const data = editor.getData();
          setContent(data);
          console.log(data);
        }}
      />
    </div>

内容的提问来源于stack exchange，提问作者moolbum