首先給你們看下效果圖：
上述功能不能滿足你們需求的可以不用往下看了……
先大致介紹下：ckedior官方有6種默認編輯器類型，
分別是：**經(jīng)典編輯器煮甥、內(nèi)聯(lián)編輯器、氣球塊編輯器、氣球編輯颤难、文檔編輯器、自定義構(gòu)建**已维。
根據(jù)我的項目需求行嗤，我需要**文檔編輯器類型**，應用于VUE項目中垛耳，官方文檔有針對vue項目的具體步驟：
第一步：為Vue.js安裝CKEditor 5 WYSIWYG編輯器組件以及您選擇的編輯器構(gòu)建栅屏。
????????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;
? }
做到這一步缔莲，你應該已經(jīng)看到了上述圖片中的內(nèi)容哥纫，如需更多功能歡迎進入我的選擇其他博客！
