ES6 import

[kl3sk]

Hello,

I'am very exited that you provide an official VueJs implementation of CKEditor5 and thank you for this.
But I want to try i and I didn't achieve.

What I've done:

• Clone this repo
• Build
• copy builded files into my app
• Install classic editor in my app
• import as a VueJs plugin

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { CKEditor } from './thirdparty/ckeditor'

Vue.use(CKEditor, {
  editors: {
    classic: ClassicEditor
  }
})

It result this error:

"export 'CKEditor' was not found in './thirdparty/ckeditor'

May I do something wrong ?

Nota:
I tried this too

...
import CKEditor from './thirdparty/ckeditor'
...

[Reinmar]

cc @oleq

[oleq]

@kl3sk I see that the error is in ./thirdparty/ckeditor. Can you tell us what it looks like? Is the path OK?

Anyway, once it is released on npm (soon), the correct way of using the component is (note the absence of curly braces):

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

Vue.use( CKEditor, {
    editors: {
        classic: ClassicEditor
    }
} );

So if you used npm run build and the component is in dist/ckeditor.js, you should use the following code instead

import Vue from 'vue';
import CKEditor from '/path/to/dist/ckeditor.js';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

We're going to release the component and extensive documentation soon. Stay tuned!

[kl3sk]

Thank for your answer.

Here is what is looks:

/*!
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */
/* eslint-disable */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CKEditor=e():t.CKEditor=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);var i={name:"ckeditor",render(t){return t(this.tagName)},props:{editor:null,value:{type:String,default:""},config:{type:Object,default:()=>({})},tagName:{type:String,default:"div"},disabled:{type:Boolean,default:!1}},data:()=>({instance:null}),mounted(){("string"==typeof this.editor?this.$_ckeditor_types[this.editor]:this.editor).create(this.$el,this.config).then(t=>{this.instance=t,t.setData(this.value),t.isReadOnly=this.disabled,this.$_setUpEditorEvents(),this.$emit("ready",t)}).catch(t=>{console.error(t)})},beforeDestroy(){this.instance&&(this.instance.destroy(),this.instance=null),this.$emit("destroy",this.instance)},watch:{value(t){this.instance.getData()!==t&&this.instance.setData(t)},disabled(t){this.instance.isReadOnly=t}},methods:{$_setUpEditorEvents(){const t=this.instance;t.model.document.on("change:data",e=>{const n=t.getData();this.$emit("input",n,e,t)}),t.editing.view.document.on("focus",e=>{this.$emit("focus",e,t)}),t.editing.view.document.on("blur",e=>{this.$emit("blur",e,t)})}}};const o={install(t,e){e=e||{},t.component(e.componentName||"ckeditor",i),t.prototype.$_ckeditor_types=e.editors},component:i};e.default=o}]).default});
//# sourceMappingURL=ckeditor.js.map

Note: I manually add /* eslint-disable */

And I'am sure that the path is ok

Until it will be release under NPM I'd like to test it as soon as possible.

EDIT: I change import order and remove * from import

import CKEditor from './thirdparty/ckeditor'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

Here is the output error: "export 'default' (imported as 'CKEditor') was not found in './thirdparty/ckeditor

EDIT2:

In my component where I want to use, there is another error:
TypeError: plugin is undefined

[oleq]

Can you console.dir( CKEditor )?

[kl3sk]

Inside main.js
undefined

Inside ./thirdparty/ckeditor.js it will output the VueJs plugin structure

[kl3sk]

If I export default CKEditor inside ./thirdparty/ckeditor.js the editor appears

[oleq]

I think this is a webpack/babel/vue.config.js issue. I tried what you did and it failed. But when I used the same file as a symlinked packge in node_modules via @ckeditor/ckeditor5-vue, it worked like a charm.

What we build as a component is an UMD module and probably vue cli (webpack? babel?) treats it differently when it's in node_modules/@ckeditor/ckeditor5-vue.

[kl3sk]

I don't have any vue.config.js file.
Until you release a NPM package (very soon I hope 😄), I'll keep my "hacky" solution.

It is strange that you don't have the same result.

Just to be clear:

• Clone the depot in a separate folder
• Build it
• Copy de build files in the "main" app

You probably right with the node_modules/@ckeditor behavior.

[oleq]

It is strange that you don't have the same result.

I had the same result :( And I'm pretty sure this is something about the way Vue CLI builds the code. It works when in node_modules/* but fails for local imports.

[kl3sk]

Ok sorry I misunderstood you meanings.

So, I suppose this will work when an NPM package will be released.
Any date ?

[oleq]

I can't give you the exact ETA at this moment but we're closing the iteration rather than starting it.

As for the issue, I found this; maybe it will help.

[oleq]

Good news @kl3sk, we've just released the component!

[kl3sk]

Yes great new, I'll try it now :D

EDIT:

Work perfectly with minimal option and ClassicEditor. I'll close my issue because it is not relevant now.

But if I understand #6 is not working ATM ?

[kl3sk]

NPM package release