CKEdior5 文档编辑器构建步骤 vue富文本编辑器

首先给你们看下效果图：

上述功能不能满足你们需求的可以不用往下看了……
先大致介绍下：ckedior官方有6种默认编辑器类型，
分别是：经典编辑器、内联编辑器、气球块编辑器、气球编辑、文档编辑器、自定义构建。
根据我的项目需求，我需要文档编辑器类型，应用于VUE项目中，官方文档有针对vue项目的具体步骤：

第一步：为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的编辑器构建。

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-你选择的编辑器类型
//比如说：我选择的是上图中的文档编辑器那么，安装语句则为：
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

第二步：在main.js引入

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

Vue.use( CKEditor );

第三步：手动将编辑器工具栏添加到DOM（使用文档编辑器必选）并加载中文版

如果是经典编辑器不需要这一步

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

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
	import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'; //中文包
    export default {
        name: 'app',
        data() {
            return {
                editor: DecoupledEditor,
                editorData: '<p>Content of the editor.</p>',
		        editorConfig: {
		           // The configuration of the editor.
		           language: 'zh-cn',  // 中文
		        },
            }
        },
        methods: {
            onReady( editor )  {
                // Insert the toolbar before the editable area.
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );
            }
        }
    }
</script>

	当然，文档默认的编辑器高度没有这么高，没有边框，你可以自行添加：.	

		ck-editor__editable {
		    min-height: 400px;
		    border: 1px solid #ccc!important;
		  }

	欧了，做到这一步，你应该已经看到了上述图片中的内容，如有疑问，欢迎交流……