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

Question

我已经通过npm安装了ckeditor5；

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

之后，我按照手册中的描述添加了编辑器。通过以下命令：

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、key Strikes 和 ui。

因此，初始化 ckeditor 时出现了问题。我应该从哪里寻找解决这个问题的方法？由于我遵循了手册中描述的所有步骤，我想我需要查看我的 Angularjs / WebPack 配置。但不知道去哪里寻找，因为我的其他 32 个软件包都没有问题。

Answer 1

这可能意味着您传递的元素不存在。 一个常见的错误是尝试在元素之前实例化编辑器。 请确保在致电

<div id="editor"></div>

 之前添加 

ClassicEditor.create()

。

Answer 2

可能你是在created()而不是mounted中初始化的

例如

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 3

通过实施

queue

 模式，您可以省心。
在某处

common.js

if (!window.queue) window.queue = {};

function addQueue(check, fnc, arg = null) {
  let key = Date.now();
  while (window.queue[key]) key++;
  window.queue[key] = { check: check, fnc: fnc, arg: arg }
}

function runQueue() {
  Object.entries(window.queue).forEach(([key, item]) => {
    if (item && item.check()) {
      item.fnc(item.arg);
      delete window.queue[key];
    }
  });
  setTimeout(runQueue, 100);
}
runQueue();

ckeditor

页面上的某个地方

function ckeInit(selector = false, readonly = false) {
  addQueue(
    function () { 
      return !!ClassicEditor && !!document.querySelector(selector || '.ckeditor');
    },
    function () {
      ClassicEditor.create(document.querySelector(selector || '.ckeditor'), {})
       .when.then...so-on.readonlySettings
    }, null
  )
}

Answer 4

在我的例子中，它是一个

div

而不是输入/文本区域，并且由于

sourceElement

手动数据设置/获取

而导致错误

    .then(editor => {
      window.editor = editor;
      editor.setData(editor.sourceElement.value);
      !readonly && editor.model.document.on('change:data', (evt, data) => {
        editor.sourceElement.value = editor.getData();
      });
    })

通过添加一行来解决

if (editor.sourceElement && editor.sourceElement.value)