简单易懂Vue2中使用CKEditor4富文本编辑器ckeditor4-vue 官网链接入口前提：首先是vue2的PC

富文本编辑.png

前提：首先是vue2的PC端项目，希望使用富文本编辑器（如上图功能），ckeditor4-vue相对上手简单容易，而且里面的功能也已经满足需求，于是最后决定使用ckeditor4-vue

在Vue项目中安装ckeditor4-vue依赖

npm install ckeditor4-vue

要创建编辑器实例，必须首先将编辑器构建和组件模块导入到应用程序的根文件中（例如，由VueCLI生成的main.js）。然后，使用Vue来启用该组件简单来说就是在main.js中添加一下代码

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';
Vue.use( CKEditor );

下面展示在单个文件内如何使用该组件

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

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                    language: 'zh-cn'
                }
            };
        }
    }
</script>

还有详情的配置往后再补充...更多详细可以去官网上看相关配置