Comments (14)
cc @oleq
from ckeditor5-vue.
@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!
from ckeditor5-vue.
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
from ckeditor5-vue.
Can you console.dir( CKEditor )
?
from ckeditor5-vue.
Inside main.js
undefined
Inside ./thirdparty/ckeditor.js
it will output the VueJs plugin structure
from ckeditor5-vue.
If I export default CKEditor
inside ./thirdparty/ckeditor.js
the editor appears
from ckeditor5-vue.
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
.
from ckeditor5-vue.
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.
from ckeditor5-vue.
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.
from ckeditor5-vue.
Ok sorry I misunderstood you meanings.
So, I suppose this will work when an NPM package will be released.
Any date ?
from ckeditor5-vue.
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.
from ckeditor5-vue.
Good news @kl3sk, we've just released the component!
from ckeditor5-vue.
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 ?
from ckeditor5-vue.
NPM package release
from ckeditor5-vue.
Related Issues (20)
- Vue3 + Vite Costum Ckeditor: error Uncaught (in promise) TypeError: this.editor.create is not a function HOT 1
- blur event not working properly version 35.0.0 HOT 2
- ckeditor vue plugins css build error (with any plugin) HOT 4
- strikethrough and underline not listing as toolbar items
- Automated tests and coverage fails on Windows HOT 2
- CKFiner errors: CKEditorError: window.CKFinder is undefined & undefined (reading 'modal') HOT 1
- `emitDebouncedInputEvent` causes performance issue with long and complex content HOT 3
- Performance issues in processing content with multiple paragraphs containing multiple inline widgets HOT 2
- [VUE] Align the release process to the changes in ckeditor5-dev
- Custom build issues (object, instead of function) - Documentation issues? HOT 1
- v-model, events "input" or "update: model-value" do not work in source edit mode HOT 3
- Uncaught ReferenceError: global is not defined HOT 1
- Migrate to CircleCI in ckeditor/ckeditor5-vue
- Add link popup have wrong position in Modal with fixed mask HOT 3
- Uncaught SyntaxError when integrating a build from the online builder when using `npm add file:./ckeditor5` in Vue HOT 7
- Table captions is absent HOT 3
- Add support for multi-root editor
- How to set the height of the editor in Vue3? I set CSS, but none of it worked HOT 8
- vue3+ts+vite use custom build HOT 1
- Allow control of batchType options in model-value watcher
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor5-vue.