Search code examples
vue.jsvuejs2ckeditorckeditor5

CKEditor5 custom build in VUE

I built my custom CKEditor5 from classic edition.

git clone -b stable https://github.com/my/forked/repo
cd ckeditor5
npm install
npm run build

In my VUE2 project's main.js

import 'path/to/ckeditor5/build/editor.js'
Vue.prototype.editor = window.ClassicEditor

In my component

<template>
  <div class="root">
    <div class="editor></div>
  </div>
</template>
<script>
  export default{
    mounted(){
      var vm = this;
      var ClassicEditor = vm.ClassicEditor;
      ClassicEditor.create(vm.$el.querySelector('.editor'))
    }
  }
</script>

I got error when ClassicEditor.create(...):

Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at Object.to (ckeditor.js?ccdb:44)
    at new ea (ckeditor.js?ccdb:342)
    at new Ac (ckeditor.js?ccdb:479)
    at new Bc (ckeditor.js?ccdb:504)
    at Eg.qc (ckeditor.js?ccdb:20)
    at Eg.Vl (ckeditor.js?ccdb:20)
    at new Eg (ckeditor.js?ccdb:20)
    at eval (ckeditor.js?ccdb:20)
    at new Promise (<anonymous>)
    at Function.create (ckeditor.js?ccdb:20)

I can get the div.editor element but show the error when create editor.

Solution

  • This error comes from the incorrect Babel transpilation. It's tracked on both Babel side and CKEditor 5 side and hopefully will be fixed soon. We've heard about similar problems in our React integration.

    I'd recommend to change the build process and to use an older version of babel for now. Or to do not transpile the code.