首先给你们看下效果图：
上述功能不能满足你们需求的可以不用往下看了……
先大致介绍下：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;
}
做到这一步，你应该已经看到了上述图片中的内容，如需更多功能欢迎进入我的选择其他博客！
