CODEWITHSUNDEEP
vue.jsvuejs2ckeditorckeditor5
lei li
lei li

Reputation: 1342

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.

Upvotes: 2

Views: 2585

Answers (2)

Abdul Basit
Abdul Basit

Reputation: 450

You can check my answer here about solving problem using CKEditor custom build for Vue 3.

Upvotes: 0

Maciej Bukowski
Maciej Bukowski

Reputation: 3348

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.

Upvotes: 3

Related Questions