升级ckeditor软件包后无法在所见即所得编辑器中键入

Question

我将CKEditor软件包更新为最新版本，并且一切正常，在webpack构建过程中没有错误，也没有任何控制台错误。但是当我尝试输入时，我根本无法输入任何内容。我使用CKEditor检查器查看是否可以找到任何其他信息，并且虽然我没有发现任何错误，但是示例示例站点中的根段落内容为[]，而在我的网站中，其内容为红色I。

这里是我的pacakge.json

{
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.9",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.9",
    "@fortawesome/fontawesome-free": "^5.10.1",
    "@symfony/webpack-encore": "^0.28.2",
    "autoprefixer": "^9.6.1",
    "core-js": "^3.0.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.1.0",
    "regenerator-runtime": "^0.13.2",
    "sass-loader": "^7.2.0",
    "webpack-notifier": "^1.8.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ],
  "dependencies": {
    "@ckeditor/ckeditor-cloud-services-core": "^18.0.0",
    "@ckeditor/ckeditor5-alignment": "^18.0.0",
    "@ckeditor/ckeditor5-autoformat": "^18.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^18.0.0",
    "@ckeditor/ckeditor5-block-quote": "^18.0.0",
    "@ckeditor/ckeditor5-editor-classic": "^18.0.0",
    "@ckeditor/ckeditor5-clipboard": "^18.0.0",
    "@ckeditor/ckeditor5-cloud-services": "^18.0.0",
    "@ckeditor/ckeditor5-core": "^18.0.0",
    "@ckeditor/ckeditor5-engine": "^18.0.0",
    "@ckeditor/ckeditor5-enter": "^18.0.0",
    "@ckeditor/ckeditor5-font": "^18.0.0",
    "@ckeditor/ckeditor5-heading": "^18.0.0",
    "@ckeditor/ckeditor5-link": "^18.0.0",
    "@ckeditor/ckeditor5-list": "^18.0.0",
    "@ckeditor/ckeditor5-media-embed": "^18.0.0",
    "@ckeditor/ckeditor5-paragraph": "^18.0.0",
    "@ckeditor/ckeditor5-remove-format": "^18.0.0",
    "@ckeditor/ckeditor5-table": "^18.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^18.0.0",
    "@ckeditor/ckeditor5-typing": "^18.0.0",
    "@ckeditor/ckeditor5-ui": "^18.0.0",
    "@ckeditor/ckeditor5-undo": "^18.0.0",
    "@ckeditor/ckeditor5-upload": "^18.0.0",
    "@ckeditor/ckeditor5-utils": "^18.0.0",
    "@ckeditor/ckeditor5-watchdog": "^18.0.0",
    "@ckeditor/ckeditor5-widget": "^18.0.0",
    "@ckeditor/ckeditor5-word-count": "^18.0.0",
    "@material-ui/core": "^4.4.3",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "change-case": "^3.1.0",
    "flexboxgrid": "^6.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "promise-polyfill": "^8.1.3",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "reset-css": "^4.0.1",
    "slick-carousel": "^1.8.1",
    "sortablejs": "^1.10.2",
    "whatwg-fetch": "^3.0.0"
  }
}

我保存在单独文件中的配置是这样的：

import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import HeadingPlugin from "@ckeditor/ckeditor5-heading/src/heading";
import FontPlugin from "@ckeditor/ckeditor5-font/src/font";
import Table from "@ckeditor/ckeditor5-table/src/table";
import TableToolbar from "@ckeditor/ckeditor5-table/src/tabletoolbar";
import TableProperties from "@ckeditor/ckeditor5-table/src/tableproperties";
import TableCellProperties from "@ckeditor/ckeditor5-table/src/tablecellproperties";
import BoldPlugin from "@ckeditor/ckeditor5-basic-styles/src/bold";
import AlignmentPlugin from "@ckeditor/ckeditor5-alignment/src/alignment";
import ItalicPlugin from "@ckeditor/ckeditor5-basic-styles/src/italic";
import ListPlugin from "@ckeditor/ckeditor5-list/src/list";
import LinkPlugin from "@ckeditor/ckeditor5-link/src/link";
import BlockQuotePlugin from "@ckeditor/ckeditor5-block-quote/src/blockquote";
import AutoformatPlugin from "@ckeditor/ckeditor5-autoformat/src/autoformat";
import MediaEmbedPlugin from "@ckeditor/ckeditor5-media-embed/src/mediaembed";
import FontColor from "@ckeditor/ckeditor5-font/src/fontcolor";

export default {
    plugins: [
        ClassicEditor,
        HeadingPlugin,
        FontPlugin,
        Table,
        TableToolbar,
        TableProperties,
        TableCellProperties,
        BoldPlugin,
        AlignmentPlugin,
        ItalicPlugin,
        ListPlugin,
        LinkPlugin,
        BlockQuotePlugin,
        AutoformatPlugin,
        MediaEmbedPlugin,
        FontColor,
    ],
    toolbar: [
        "undo",
        "redo",
        "|",
        "heading",
        "bold",
        "|",
        "fontSize",
        "fontColor",
        "|",
        "insertTable",
        "|",
        "link",
        "mediaEmbed",
        "|",
        "alignment:left",
        "alignment:center",
        "alignment:right",
        "alignment:justify",
        "|",
        "italic",
        "blockQuote",
        "|",
        "bulletedList",
        "numberedList",
    ],
    heading: {
        options: [
            {model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph"},
            {
                model: "heading1",
                view: {
                    name: "h1",
                    classes: "ck_h1"
                },
                title: "Heading 1",
                class: "ck-heading_heading1"
            },
            {
                model: "heading2",
                view: {
                    name: "h2",
                    classes: "ck_h2"
                },
                title: "Heading 2",
                class: "ck-heading_heading2"
            },
            {
                model: "heading3",
                view: {
                    name: "h3",
                    classes: "ck_h3"
                },
                title: "Heading 3",
                class: "ck-heading_heading3"
            },
            {
                model: "heading4",
                view: {
                    name: "h4",
                    classes: "ck_h4"
                },
                title: "Heading 4",
                class: "ck-heading_heading4"
            },
            {
                model: "small",
                view: "small",
                title: "Small",
                class: "ck-heading_small"
            },
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableProperties',
            'tableCellProperties'
        ],

        // Configuration of the TableProperties plugin.
        tableProperties: {
            //
        },

        // Configuration of the TableCellProperties plugin.
        tableCellProperties: {
            //
        }
    },
    mediaEmbed: {
        previewsInData: true
    },
    fontColor: {
        colors: [
        ]
    },
};

并且我将实例化编辑器如下（即使只有一个编辑器，也会发生此问题。）>

$(document).ready(() => {
    const $editors = $(".ckeditor");

    if ($editors.length > 0) {
        $editors.each(function () {
            ClassicEditor.create(this, editorConfig).then( editor => {
                CKEditorInspector.attach( editor );
            } )
                .catch( error => {
                    console.error( error );
                } );
        });
    }
    });
这里是CKEditor检查器输出的屏幕截图。

我在这里做错什么了吗？

我将CKEditor软件包更新为最新版本，并且一切正常，在webpack构建过程中没有错误，也没有任何控制台错误。但是当我尝试输入时，我根本无法输入...

Answer 1

我终于弄清楚了问题所在。我以为添加undo, copyToClipboard之类的插件意味着我不需要essentials插件，但是不，我错了。要解决此问题，请安装essentials插件，如下所示：