V-model and tag-name not working as expected about ckeditor5-vue

[Flobbos]

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.

[nyoijizai]

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>

[gborcherds]

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.

[oleq]

I don't see value to meet v-model="value" in your component's data().

[gborcherds]

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>

[oleq]

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

?

[gborcherds]

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.

[oleq]

@gborcherds Can you provide the configuration (building blocks) of your custom build?

[gborcherds]

@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.

[oleq]

@Flobbos I created an online sample with your code and it just works. Am I missing something?

[Flobbos]

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.

[EduardoRomo]

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.

[Mgsy]

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.