CKEditor5 интеграция в Vue.js

Совсем недавно команда CKSource реализовала нативную интеграцию CKEditor5 с Vue.js. Теперь редактор можно без труда интегрировать в три самых популярных javascript фреймфорка React, Angular 2+ и Vue.js

WYSIWYG редактор для Vue.js

Самый простой способ использовать CKEditor 5 в вашем Vue.js приложении - это установить @ckeditor/ckeditor5-vue и одну из сборок CKEditor 5:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Включите компонент глобально в вашем приложении:

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

Затем используйте его в своем файле .vue для создания экземпляра редактора:

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

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

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Rich-text editor content.</p>',
                editorConfig: {
                    // The configuration of the rich-text editor.
                }
            };
        }
    }
</script>

Вы также можете использовать компонент с Vue CLI или просто загрузить его из CDN. Вы можете узнать больше о различных методах интеграции CKEditor 5 с вашим приложением Vue.js в руководстве по установке.