Question

我已经通过npm安装了ckeditor5；

npm install --save @ckeditor/ckeditor5-build-classic

此后，我将编辑器作为described in the manual包括在内。通过以下命令：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

但是当我尝试执行示例代码时，它们会在本手册中提供：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

我收到错误 CKEditorError：“无法将null转换为对象” 。当检查 ClassicEditor 对象时，我注意到它是一个需要通过new ClassicEditor()初始化的函数，该函数具有属性 name ， builtinPlugins ＆ defaultConfig 。

通过此方法创建对象时。正在创建一个具有一系列完整属性的新对象，例如 _events ，击键和 ui 。

所以出了点问题，初始化ckeditor。我应该在哪里解决这个问题？由于我按照手册中的描述执行了所有步骤，因此我想我需要查看Angularjs / WebPack的配置。但是不知道在哪里寻找，因为我所有其他32个软件包都没有问题。

Answer 1

可能你是在 created() 中初始化而不是挂载

例如

export default {
  name: 'ClassicEditor',

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.initEditor()
  },

  methods: {

    initEditor() {
    
      ClassicEditor.create(document.querySelector('#ykEditor'), {
        language: 'zh-cn',
      }).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        this.editor = editor
      }).catch(e=>{
        console.log(e)
      });
    },

  }

}

init 方法应该在mounted()中

Answer 2

这可能意味着您传递的元素不存在。一个常见的错误是试图在元素之前实例化编辑器。确保在调用 <div id="editor"></div> 之前添加 ClassicEditor.create()。

如何解决“ CKEditor错误：“无法将null转换为对象””错误

2 个答案: