VUE中的CKEditor5自定义构建

Question

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.

Answer 1

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.

• https://github.com/babel/babel/issues/8913
• https://github.com/facebook/create-react-app/issues/5387
• https://github.com/ckeditor/ckeditor5-react/issues/41#issuecomment-428716100

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.