ckeditor5富文本编辑器在vue中的使用

Posted 2021-12-02 miaosen

安装依赖：

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

要创建编辑器实例，必须首先将编辑器构建和组件模块导入应用程序的根文件中（例如，main.js在由Vue CLI生成时）。然后，使用以下Vue.use()方法启用组件：

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

Vue.use( CKEditor );

在组件中的具体使用方式如下：

<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>Content of the editor.</p>‘,
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

设置ckeditor5输入区域的高度：

<style>
.ck-editor__editable { min-height: 100px; }
</style>