VUE引入CKEditor方法

最近在做一个CMS系统，然后找了几个插件，最后在ueditor和CKEditor挑选的，为什么没有选择百度的ueditor呢？

总之就是issue太多了，百度爸爸不想在搞这个麻烦了。然后就用了CKEditor.

引入的时候在网上搜了好多文章，用了各种姿势，全部都找不到依赖，有各种各样的问题。然后就去研究了官方文档。

具体步骤如下

1.先引入包

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

官方给了两种因与方法，script标签直接引入和ES6 import引入，我个人比较喜欢import的方式，所以这里介绍ES6方法

2.在main,js中引入依赖

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

Vue.use( CKEditor );

Vue.use( CKEditor );是为了确保你在全局都可以使用

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

<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>

这样你就会得到一个富文本编辑的窗口，大概长这样

 

creditor的API很多，可以按需配置，有比较完全系统的API文档，大家可以根据自己的需求去配置。

附上官方API地址给各位大佬https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html