-
Notifications
You must be signed in to change notification settings - Fork 77
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
Comments
cc @oleq |
@kl3sk I see that the error is in 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 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! |
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 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 import CKEditor from './thirdparty/ckeditor'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic' Here is the output error: EDIT2: In my component where I want to use, there is another error: |
Can you |
Inside Inside |
If I |
I think this is a webpack/babel/ What we build as a component is an UMD module and probably vue cli (webpack? babel?) treats it differently when it's in |
I don't have any It is strange that you don't have the same result. Just to be clear:
You probably right with the |
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 |
Ok sorry I misunderstood you meanings. So, I suppose this will work when an NPM package will be released. |
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. |
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 ? |
NPM package release |
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:
It result this error:
"export 'CKEditor' was not found in './thirdparty/ckeditor'
May I do something wrong ?
Nota:
I tried this too
The text was updated successfully, but these errors were encountered: