Я обновил пакеты 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.
Есть что-то, что я здесь делаю неправильно?