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