Comments (13)
I have the exact same problem. I can't get the v-model filled with content, no matter how simple it is. The only way to show the content that's loaded into the v-model is by going into dev-tools and manually changing the editor content by adding a space or whatever and then it will show. Nothing else works. This is highly frustrating.
<template>
<div>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
<textarea :name="name" v-model="editorData" style="display: none;"></textarea>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from '@ckeditor/ckeditor5-vue';
export default {
components: {
ckeditor: CKEditor.component
},
props: {
content: {
type: String,
default: ''
},
name: {
type: String,
default: 'description'
}
},
data() {
return {
editorData: this.content,
editor: ClassicEditor,
editorConfig: {
name: this.name,
}
};
}
}
</script>
<style lang="scss">
</style>
I also tried adding just a simple
Boo!
and it won't display. No idea what's going on.from ckeditor5-vue.
The solution
After testing, I found that EssentialsPlugin
must be import.
App.vue
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import Autoformat from "@Îckeditor/ckeditor5-autoformat/src/autoformat";
// Must be import
import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials";
export default {
components: {
ckeditor: CKEditor.component,
},
data() {
return {
demo: "",
editor: ClassicEditor,
editorData: "<p>Content of the editor.</p>",
editorConfig: {
plugins: [Heading, Autoformat, EssentialsPlugin],
toolbar: {
items: ["heading"],
},
title: {
placeholder: "My custom placeholder for the title",
},
placeholder: "My custom placeholder for the body",
},
};
},
};
</script>
Old question
the same problem.
why v-model
not work? when I using CKEditor from source
"@ckeditor/ckeditor5-vue": "^1.0.1",
"@ckeditor/ckeditor5-editor-classic": "^21.0.0",
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
export default {
data() {
return {
editor: ClassicEditor,
editorData: "<p>Content of the editor.</p>",
editorConfig: {},
};
},
};
</script>
from ckeditor5-vue.
I also just created a simple value to dynamically update the value to "Hello World" and when I update the value, it just makes the value go blank and clear the editor.
from ckeditor5-vue.
I don't see value
to meet v-model="value"
in your component's data()
.
from ckeditor5-vue.
The full file with the actual editor is below. It does have it. I have the configuration for the editor in a mixin because I use this editor in a lot of different places and so I extracted all the configuration to the mixin.
<template>
<v-layout wrap>
<v-flex>
<ckeditor tag-name="span" :editor="classEditor" v-model="value" :config="editorConfig"></ckeditor>
<v-btn @click="showNow">Test</v-btn>
</v-flex>
</v-layout>
</template>
<script>
export default {
props: {
option : Object
},
data () {
return {
value : 'test'
}
},
methods: {
showNow() {
this.value = 'Hello World'
}
}
}
</script>
from ckeditor5-vue.
I used the following code
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
<script src="../dist/ckeditor.js"></script>
<div id="app">
<ckeditor tag-name="span" :editor="classEditor" v-model="value" :config="editorConfig"></ckeditor>
</div>
<script>
Vue.use( CKEditor );
const app = new Vue( {
el: '#app',
data () {
return {
classEditor: ClassicEditor,
value: 'test',
editorConfig : {
toolbar: [ 'bold', 'italic' ]
}
}
},
} );
</script>
</body>
and got both the initial data an the <span>
as the data container
Maybe the problem is somewhere else? What do you exactly mean by
trying to change the tag-name
?
from ckeditor5-vue.
I switched out the build from use the build I was doing to the basic one and it worked. So there was definitely something with my configuration. I'm just wondering what was missing from the custom build to the classic build that would allow this to work.
from ckeditor5-vue.
@gborcherds Can you provide the configuration (building blocks) of your custom build?
from ckeditor5-vue.
@oleq the building blocks are in the original issue description. I'm using Laravel Mix using webpack to perform the build, but the packages I was including are the ones from the original issue post.
from ckeditor5-vue.
@Flobbos I created an online sample with your code and it just works. Am I missing something?
from ckeditor5-vue.
I ended up removing CKEditor entirely and reinstalling the latest version. It was version 11.2.0 according to my package.json file. No idea why it suddenly refused to work after being fully functional for almost a year using that version.
from ckeditor5-vue.
I had exactly the same issue. It was fixed updating @ckeditor/ckeditor5-vue from version "^1.0.0-beta.1" to "^1.0.1". Same thing, it suddenly stopped working after months using the same version.
from ckeditor5-vue.
I'm closing this issue as we're unable to reproduce it. If you feel that we should investigate it, please open a new issue with a detailed description and steps to reproduce the problem.
from ckeditor5-vue.
Related Issues (20)
- 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
- Investigate warning
- Bug Report: Strikethrough Not Showing on Vue 3 with CKEditor
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.