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>

設置ckeditor5輸入區域的高度：

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