1. 官網下載CKEditor 4，將解壓的ckeditor文件夾整體放在項目的public下
https://ckeditor.com/ckeditor-4/download/
2.在Vue的index.html中引入CKEditor4
<script src="ckeditor/ckeditor.js"></script>
3.在components下新建ckeditor.vue文件，並在其中配置上出圖片的路徑
<template>
<div>
<textarea :id="id"></textarea>
</div>
</template>
<script>
import httpConfig from '../config/http';
let { kpaasApiHost } = httpConfig;
import sysConfig from '../config/system';
export default {
name: "ckeditor4",
props: ["value"],
mounted: function() {
const self = this;
// 渲染編輯器，配置上傳圖片的路徑
// self.ckeditor = window.CKEDITOR.replace(self.id);
setTimeout(function(){
// 渲染編輯器
self.ckeditor = window.CKEDITOR.replace(self.id,{filebrowserImageUploadUrl: kpaasApiHost+'api/assets_service/v1/assets/upload_editer?secret_key='+sysConfig.secret_key+'&session_id='+localStorage.getItem("sessionId") });
// 設置初始內容
self.ckeditor.setData(self.value);
// 監聽內容變更事件
self.ckeditor.on("change", function() {
self.$emit("input", self.ckeditor.getData());
});
},100)
}, data: function() { return { id: parseInt(Math.random() * 10000).toString(), ckeditor: null }; }, watch: { // 監聽prop的變化，更新ckeditor中的值 value: function() { if (this.value !== this.ckeditor.getData()) { this.ckeditor.setData(this.value); } } }, // 銷毀組件前，銷毀編輯器 beforeDestroy: function() { this.ckeditor.destroy(); } }; </script>
4.注釋掉ckeditor文件夾下config.js的上傳圖片路徑
/** * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. // For complete reference see: // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html // The toolbar groups arrangement, optimized for two toolbar rows. config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'links' }, { name: 'insert' }, { name: 'forms' }, { name: 'tools' }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'others' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, { name: 'styles' }, { name: 'colors' }, { name: 'about' } ]; // Remove some buttons provided by the standard plugins, which are // not needed in the Standard(s) toolbar. config.removeButtons = 'Underline,Subscript,Superscript'; // Set the most common block elements. config.format_tags = 'p;h1;h2;h3;pre'; // Simplify the dialog windows. config.removeDialogTabs = 'image:advanced;image:link;link:advanced'; config.image_previewText = ' '; //上傳圖片窗口用到的接口 // config.filebrowserImageUploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit"; /*config.filebrowserUploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit"; // 使上傳圖片彈窗出現對應的“上傳”tab標簽 config.removeDialogTabs = 'image:advanced;link:advanced'; //粘貼圖片時用得到 config.extraPlugins = 'uploadimage'; config.uploadUrl = "http://192.168.12.160:8090/gdt_information/messageFeedBack/uploadImgEdit";*/ };
5.引入使用組件
<ckeditor v-model="caseData.content"></ckeditor> import ckeditor from "../../components/ckeditor.vue"; components: { ckeditor },
6.CKEditor編輯器添加文本對齊，居中、居左、居右插件
1) 直接在官方下載justify插件，根據提示安裝，下載地址
http://ckeditor.com/addon/justify
2) 配置config.js：
//添加文本對齊方式 config.extraPlugins = 'justify'
7.setData賦值不上的問題
watch: { // 監聽prop的變化，更新ckeditor中的值 value: function() { if (this.value !== this.ckeditor.getData()) { this.ckeditor.setData(this.value); setTimeout(() => { //暫先處理setData賦值不上的問題500ms let body = (document.getElementById((this.ckeditor.id) + '_contents').getElementsByTagName('iframe')[0]).contentDocument.getElementsByTagName('body'); if(body.length == 1){ body[0].innerHTML = this.value; } // console.log('body',body) },500) } } },
8.注意部分插件之間存在依賴關系，插件需要在安裝某些插件的前提下安裝該插件才會生效
9.移出ckeditor的某項插件功能，在ckeditor的config.js中
config.removeButtons = 'Underline,Subscript,Superscript,NumberedList,BulletedList,Anchor,Source';
10.CKEditor的具體配置項
Source = 源碼模式 - Save = 保存(提交表單) NewPage = 新建 Preview = 預覽 - = 分割線 Templates = 模板 Cut = 剪切 Copy = 復制 Paste = 粘貼 PasteText = 粘貼為無格式文本 PasteFromWord = 從 MS WORD 粘貼 - Print = 打印 SpellChecker = 拼寫檢查 Scayt = 即時拼寫檢查 Undo = 撤銷 Redo = 重做 - Find = 查找 Replace = 替換 - SelectAll = 全選 RemoveFormat = 清除格式 Form = 表單 Checkbox = 復選框 Radio = 單選框 TextField = 單行文本 Textarea = 多行文本 Select = 列表/菜單 Button = 按鈕 ImageButton = 圖片按鈕 HiddenField = 隱藏域 / Bold = 加粗 Italic = 傾斜 Underline = 下划線 Strike = 刪除線 - Subscript = 下標 Superscript = 上標 NumberedList = 編號列表 BulletedList = 項目列表 - Outdent = 減少縮進量 Indent = 增加縮進量 Blockquote = 塊引用 CreateDiv = 創建DIV容器 JustifyLeft = 左對齊 JustifyCenter = 居中 JustifyRight = 右對齊 JustifyBlock = 兩端對齊 BidiLtr = 文字方向從左到右 BidiRtl = 文字方向從右到左 Link = 插入/編輯超鏈接(上傳文件) Unlink = 取消超鏈接 Anchor = 插入/編輯錨點鏈接 Image = 圖像(上傳) Flash = 動畫(上傳) Table = 表格 HorizontalRule = 插入水平線 Smiley = 插入表情 SpecialChar = 插入特殊符號 PageBreak = 插入分頁符 / Styles = 樣式快捷方式 Format = 文本格式 Font = 字體 FontSize = 文字大小 TextColor = 文字顏色 BGColor = 背景顏色 Maximize = 全屏編輯模式 ShowBlocks = 顯示區塊 - About = 顯示關於