How to resolve the 'CKEditor Error: "can't convert null to object"' error

Question

I have installed the ckeditor5 via npm;

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

After that I have included the editor as described in the manual. Via the following command:

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

But when I try to execute the sample code they provide in this manual:

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

I get the error CKEditorError: "can't convert null to object". When inspecting the ClassicEditor object, I notice it is a function which needs to be initialised via new ClassicEditor() with the properties name, builtinPlugins & defaultConfig.

When creating an object via this method. A new object with a whole array of properties like _events, keystrokes & ui is being created.

So there goes something wrong, initializing the ckeditor. Where should I look to resolve this issue? Since I followed all the steps as described in the manual, I suppose I need to look at my Angularjs / WebPack configuration. But wouldn't know where to look for, since I had no issues with all my other 32 packages.

Answer 1

That probably means the element you are passing doesn't exists. A common mistake would be trying to instantiate the editor before the element. Make sure you add <div id="editor"></div> before calling ClassicEditor.create().

Answer 2

may be you init in created() instead of mounted

for example

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 method should be in mounted()