CKEditor5 v 34.1.0 错误"editor-isreadonly-has-no-setter" with NuxtJS

Question

我们正在一个使用NuxtJs v2.15.8的网站上工作，并使用CKEditor5有一个next/vue组件。该组件最初是在ckedor5 v33中开发的，但我们刚刚升级到v34.1.0。

当加载包含组件的页面时，我们现在得到以下错误:

CKEditorError: editor-isreadonly-has-no-setter

这是在v34中引入的一个突破性的更改:https://ckeditor.com/docs/ckeditor5/latest/updating/migration-to-34.html#changed-mechanism-for-setting-and-clearing-the-editor-read-only-mode

我们之前没有直接设置。isreadonly属性，所以我们不确定需要在哪里更新代码来解决这个错误。

我们已经查看了CKEditor网站上的文档(见下面的链接)，但仍然不清楚如何解决这个问题-不幸的是，我们都是NuxtJS和CKEditor的新手，所以这对我们来说是不熟悉的。

我认为问题是我们没有试图在正确的地方或以正确的方式访问ckedor5。我们已经尝试在CKeditorNuxt.vue和MyParentComponent.vue中添加调用enableReadOnlyMode到不同的生命周期钩子和函数。例如，我们在两个组件上使用了created、beforeMount和mounted生命周期钩子。在这些钩子中，ckeditor返回undefined——所以要么我们没有正确地访问它，要么在我们试图调用它的生命周期中它实际上还不存在。

下面是ckeditor.js文件，它来自生成的在线构建:

**ckeditor.js**
import DecoupledDocumentEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage.js';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption.js';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize.js';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';

class Editor extends DecoupledDocumentEditor {}

// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
AutoImage,
Base64UploadAdapter,
BlockQuote,
Bold,
CloudServices,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
MediaEmbed,
Paragraph,
PasteFromOffice,
Strikethrough,
Subscript,
Superscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
TodoList,
Underline
];

// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'fontSize',
'fontFamily',
'|',
'fontColor',
'fontBackgroundColor',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'subscript',
'superscript',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'todoList',
'|',
'outdent',
'indent',
'|',
'link',
'blockQuote',
'imageUpload',
'imageInsert',
'insertTable',
'mediaEmbed',
'|',
'undo',
'redo'
]
},
language: 'en',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
}
};
export default Editor;

然后我们将其包装在一个名为CKeditorNuxt.vue的自定义next组件中(见下文)。

**CKeditorNuxt.vue**
<template>
<ckeditor
:editor="editor"
:value="value"
:config="config"
:tagName="tagName"
:disabled="disabled"
@ready="onReady"
@input="event => $emit('input', event)"
/>
</template>
<script>
let DecoupledEditor
let CKEditor
if (process.client) {
DecoupledEditor = require('../ckeditor5-custom/build/ckeditor.js');
CKEditor = require('@ckeditor/ckeditor5-vue2');
} else {
CKEditor = { component : {template:'<div></div>'}}
}
export default {
name: "CkeditorNuxt",
components: {
ckeditor: CKEditor.component
},
props: {
value: {
type: String,
required: false
},
tagName: {
type: String,
required: false,
default: 'div'
},
disabled: {
type: Boolean,
required: false,
default: false
},
uploadUrl: {
type: String,
required: false
},
config: {
type: Object,
required: false,
default: function () {
}
}
},
data() {
return {
editor: DecoupledEditor,
};
},
methods: {
onReady( editor )  {
// previously we were using the "disabled" prop defined above to effectively
// set whether it was readonly and whether the toolbar appears - we 
// may want to change this to use the new method
if (!this.$props.disabled) {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
}
},
}
};
</script>

以上ckeditornext。如果一个组件是，那么在另一个next组件中作为子组件使用:

**MyParentComponent.vue**
<div>  
<CkeditorNuxt id="id-ex" class="class-ex" v-model="myviewmmodel" />
<div>
<script>
import CkeditorNuxt from "./CkeditorNuxt";
export default {
name: "MonographSubSectionDetail",
components: {
CkeditorNuxt
},
};
</script>

我们尝试在CKeditorNuxt.vue组件中的created、beforeMount和Mounted钩子中使用的一些变化:

editor.disableReadOnlyMode( "defaultEditorLock" );

和

CKEditor.disableReadOnlyMode( "defaultEditorLock" );

和

DecoupledEditor.disableReadOnlyMode( "defaultEditorLock" );

在MyParentComponent.vue组件中，我们尝试直接调用CkeditorNuxt.disableReadOnlyMode。

所有这些都返回未定义的编辑器。

不确定我们需要做什么来访问组件并调用disable/enableReadOnlyMode。

感谢您的时间和帮助。

我们在研究错误时使用的文档:

https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html error-editor-isreadonly-has-no-setter

https://ckeditor.com/docs/ckeditor5/latest/updating/migration - - 34. - html # changed-mechanism-for-setting-and-clearing-the-editor-read-only-mode

https://nuxtjs.org/pt/docs/concepts/nuxt-lifecycle/

https://vuejs.org/guide/essentials/lifecycle.html registering-lifecycle-hooks

CK编辑器5 custom build onChange不工作

Answer 1

最后得到了一些建议，使我能够修复它:https://github.com/ckeditor/ckeditor5-vue/issues/223

问题出在另一个依赖项上，它也使用了isReadOnly标志，需要升级。我们使用的是旧版本的@ckeditor/ckeditor5-vue2(因为我们还没有升级到ve3)。一旦我们更新到当前版本(3.0.1，截至今天)，就解决了这个问题。