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

安装依赖：

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>

如果需要自定义配置，则可以配置如下：

editorConfig: {
　　　　language: 'zh-cn',
      toolbar: ['heading', 'fontSize', 'highlight', 'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker', 'highlight:blueMarker', 'fontFamily', 'alignment', 'imageUpload', 'bold', 'italic', 'underline', 'imageStyle:full', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'link', 'undo', 'redo'],
      fontSize: {
        options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72],
      },
　　　　 highlight: {
　　　　　　options: [
　　　　　　　　{ model: 'blackPen', class: 'pen-black', title: '黑色', color: 'var(--ck-highlight-pen-black)', type: 'pen' },
　　　　　　　　{ model: 'redPenPen', class: 'pen-red', title: '红色', color: 'var(--ck-highlight-pen-red)', type: 'pen' },
　　　　　}
　　　 }，
　　　　ckfinder: {
　　　　　　uploadUrl: `${store.getters.currentStack.baseURL}/ckeditor/upload`,
　　　　　　// 后端处理上传逻辑返回json数据,包括uploaded 上传的字节数 和url两个字段
　　　　　},
    }

 

设置ckeditor5输入区域的高度：

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

效果图如下：

至此，就大功告成了！！！！！！

转载于:https://www.cnblogs.com/yuwenjing0727/p/10772749.html