Невозможно ввести текст в редакторе WYSIWYG после обновления пакетов ckeditor - PullRequest
0 голосов
/ 04 апреля 2020

Я обновил пакеты CKEditor до последней версии, и казалось, что все работает нормально, без ошибок во время сборки веб-пакета или каких-либо ошибок консоли. Но когда я пытаюсь набрать, я просто не могу ничего напечатать. Я использовал инспектор CKEditor, чтобы посмотреть, смогу ли я найти какую-либо дополнительную информацию, и хотя я не смог найти никаких ошибок, содержание абзаца root - это [] на примере сайта, тогда как на моем это немного красный 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. enter image description here

Есть что-то, что я здесь делаю неправильно?

1 Ответ

0 голосов
/ 05 апреля 2020

Я наконец понял, в чем проблема. Я подумал добавить плагины как undo, copyToClipboard означало, что мне не нужен плагин essentials, но нет, я был неправ. Чтобы решить эту проблему, установите плагин essentials следующим образом:

npm install --save @ckeditor/ckeditor5-essentials

, а затем импортируйте его в список плагинов следующим образом:

export default {
    plugins: [
        Essentials,
        Heading,

Вам также не нужно включите ClassicEditor в качестве плагина.

...