CKEditor

CKEditor

官网：ckeditor.com/

Github:github.com/ckeditor/ck… star 4688 Fork 2085

集成：

1.先引入包

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

2.在main,js中引入依赖

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );

3，在想要使用富文本编辑的页面使用

    <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>CKEditor调研</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

运行成功后如下

优点：颜值高，界面简单，轻巧，配置方式简单，图片上传时后端配置少

缺点：图片上传时，默认没有图片预览，图片上传无法看到上传进度，网上相关中文文档较少，英文文档阅读难度大，不利于英语不好的伙伴维护