Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6 import #5

Closed
4 of 5 tasks
kl3sk opened this issue Nov 5, 2018 · 14 comments
Closed
4 of 5 tasks

ES6 import #5

kl3sk opened this issue Nov 5, 2018 · 14 comments
Labels
resolution:cantfix Issue that cannot be fixed due to platform limitations.

Comments

@kl3sk
Copy link

kl3sk commented Nov 5, 2018

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
Copy link
Member

Reinmar commented Nov 5, 2018

cc @oleq

@oleq
Copy link
Member

oleq commented Nov 5, 2018

@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
Copy link
Author

kl3sk commented Nov 5, 2018

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
Copy link
Member

oleq commented Nov 5, 2018

Can you console.dir( CKEditor )?

@kl3sk
Copy link
Author

kl3sk commented Nov 5, 2018

Inside main.js
undefined

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

@kl3sk
Copy link
Author

kl3sk commented Nov 5, 2018

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

@oleq
Copy link
Member

oleq commented Nov 5, 2018

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
Copy link
Author

kl3sk commented Nov 5, 2018

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
Copy link
Member

oleq commented Nov 5, 2018

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
Copy link
Author

kl3sk commented Nov 5, 2018

Ok sorry I misunderstood you meanings.

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

@oleq
Copy link
Member

oleq commented Nov 5, 2018

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
Copy link
Member

oleq commented Nov 6, 2018

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

@kl3sk
Copy link
Author

kl3sk commented Nov 6, 2018

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
Copy link
Author

kl3sk commented Nov 6, 2018

NPM package release

@kl3sk kl3sk closed this as completed Nov 6, 2018
@oleq oleq added the resolution:cantfix Issue that cannot be fixed due to platform limitations. label Nov 6, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
resolution:cantfix Issue that cannot be fixed due to platform limitations.
Projects
None yet
Development

No branches or pull requests

3 participants