ziben69's avatar

Vue.js | ckeditor integrate with vue.js

Hello guys, I am trying to upload ckeditor to my project, but for 7 hours I try and it does not go away. I searched google, installed from 30 packages (npm), I did with tutorials and slowly give up. Please help, I need to configure wysiwyg editor globally for all views that contain id = "description".

I have something like that: component CKeditor.vue

<template>

</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import VueCkeditor from 'vue-ckeditor5'

    export default {
        components: {
            'vue-ckeditor': VueCkeditor.component
        },
        data(){
            return {
                value1: 'hello',
                value2: 'world',
                editors: {
                    classic: ClassicEditor
                }
            }
        },
        template: 
        `<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
    }
</script>

View create.blade.php:

<ckeditor type="classic" v-model="value1" class="form-control" rows="5" name="description"
                                      id="description" placeholder="Description" maxlength="3000"></ckeditor>

app.js:

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

require('./bootstrap');

Vue.component('ckeditor', require('./components/CKeditor.vue').default);

window.Vue = require('vue');
window.onload = function () {
    const app = new Vue({
        el: '#app'
    });
}

the works were on the tutorial from https://github.com/igorxut/vue-ckeditor5

please help me run this wysiwyg editor. So much thanks... :*

0 likes
2 replies
Norbertho's avatar

Have you got any error? or simple it doesn't show up?

ziben69's avatar

@NORBERTHO - Yes:


ckeditor.js:5 ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-version-collision
 {collidingVersion: "12.0.0", version: "11.2.0"}
error @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
n @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5
(anonymous) @ ckeditor.js:5


app.js:40212 [Vue warn]: Property or method "value1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

Please or to participate in this conversation.