CKEditor5 v 34.1.0 错误“editor-isreadonly-has-no-setter”与 NuxtJS

问题描述 投票：0回答：2

我们正在使用 NuxtJs v2.15.8 开发一个站点，并且有一个使用 CKEditor5 的 nuxt/vue 组件。该组件最初是使用 CKEditor5 v33 开发的，但我们刚刚升级到 v 34.1.0.

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

CKEditorError: editor-isreadonly-has-no-setter

这是 v 34 中引入的重大更改：https://ckeditor.com/docs/ckeditor5/latest/updating/migration-to-34.html#changed-mechanism-for-setting-and-clearing-the-编辑器只读模式

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

我们已经查看了 CKEditor 网站上的文档（请参阅下面的链接），但仍不清楚如何解决该问题 - 不幸的是，我们对 NuxtJS 和 ckeditor 都是新手，所以这对我们来说并不熟悉。

我认为问题在于我们没有尝试在正确的位置或以正确的方式访问 ckeditor5。我们已尝试在 

CKeditorNuxt.vue
和 
MyParentComponent.vue
中将对 enableReadOnlyMode 的调用添加到不同的生命周期挂钩和函数。例如，我们在两个组件上都使用了 created、beforeMount 和 mounted 生命周期挂钩。在那些钩子中，ckeditor 返回未定义的——所以要么我们没有正确访问它，要么它在我们试图调用它的生命周期中实际上并不存在。

下面是生成的在线构建文件

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
（如下）的自定义 Nuxt 组件中。

**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>

上面的CKeditorNuxt.vue组件then在另一个Nuxt组件中作为子组件使用：

**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-to-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 Editor 5 自定义构建 onChange 不起作用

nuxt.js ckeditor5
2个回答
0
投票

终于在这里得到了一些建议，使我能够修复它： https://github.com/ckeditor/ckeditor5-vue/issues/223

问题出在另一个依赖项上，该依赖项也使用了

isReadOnly
标志并且需要升级。我们使用的是旧版本的 
@ckeditor/ckeditor5-vue2
（因为我们还没有升级到 Vue3）。一旦我们更新到当前版本（3.0.1，截至今天）就解决了这个问题。

0
投票

完美解决方案@ckeditor/ckeditor5-vue2

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.