前言：ueditor是百度開(kāi)源的一款富文本編輯器妖异，還是比較流行的惋戏，之前有寫(xiě)過(guò)一篇vue后臺(tái)管理項(xiàng)目中使用froala-editor富文本編輯器教程，froala-editor是一個(gè)收費(fèi)的編輯器他膳，主題皮膚都挺好看的响逢，并且支持v-model,十分的方便，但是想要集成第三方的編輯器就不太行了棕孙，比如集成秀米舔亭。看個(gè)人需求吧蟀俊，ueditor百度編輯器的默認(rèn)主題皮膚真心丑钦铺，我是看不下去，所以決定換膚Ｖぁ矛洞！先上兩張對(duì)比圖～
換膚前
換膚后
1. 先去ueditor官網(wǎng)按照需求下載
image.png
2. 下載解壓后名字改成UEditor，丟到vue項(xiàng)目中的public目錄下（或者static下）
image.png
3. 安裝vue-editor-wrap
cnpm i vue-ueditor-wrap -S
//引入組件
import VueUeditorWrap from 'vue-ueditor-wrap' //es6
//注冊(cè)組件
components: {
VueUeditorWrap
},
//template
<vue-ueditor-wrap v-model="msg" :config='myConfig'></vue-ueditor-wrap>
// data
msg: '',
myConfig: {
// 編輯器不自動(dòng)被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器寬度
initialFrameWidth: '100%',
// 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口误甚，請(qǐng)勿在生產(chǎn)環(huán)境使用８克ΑＦ拙弧！）
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 資源文件的存放路徑擅威，如果你使用的是 vue-cli 生成的項(xiàng)目壕探，通常不需要設(shè)置該選項(xiàng)，vue-ueditor-wrap 會(huì)自動(dòng)處理常見(jiàn)的情況郊丛，如果需要特殊配置李请，參考下方的常見(jiàn)問(wèn)題2
UEDITOR_HOME_URL: '/UEditor/'
}
沒(méi)有失誤的話，是這個(gè)樣子的厉熟。
image.png
4. 接下來(lái)就是換膚了导盅。
換膚也比較簡(jiǎn)單，就是重寫(xiě)css揍瑟，在
ueditor.config.js中白翻，把theme:'default'的注釋打開(kāi)，修改成theme:'notadd'绢片，然后把準(zhǔn)備好的css丟到public/UEditor/themes下,在public/UEditor/themes/iframe.css中添加
img {
max-width: 100%;
height: auto;
}
像這樣滤馍。
image.png
ps:皮膚文件+v 1115009958 索取,不是無(wú)償?shù)模?qǐng)知悉
然后編輯器就變成了這個(gè)樣子底循。
image.png
5.自定義按鈕和彈窗
vue-ueditor-wrap v-model="msg" :config='myConfig'></vue-ueditor-wrap>
改成
vue-ueditor-wrap v-model="msg" :config='myConfig' @ready="ready" @before-init="addCustomButtom"></vue-ueditor-wrap>
//data
editor:{},
myConfig: {
toolbars: [
[
'fullscreen',//全屏
'source',//源碼
'undo', //撤銷(xiāo)
'redo', //前進(jìn)
'bold', //加粗
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'fontborder', //字符邊框
'formatmatch', //格式刷
// 'fontfamily', //字體
'fontsize', //字號(hào)
'justifyleft', //居左對(duì)齊
'justifycenter', //居中對(duì)齊
'justifyright', //居右對(duì)齊
// 'justifyjustify', //兩端對(duì)齊
'insertorderedlist', //有序列表
'insertunorderedlist', //無(wú)序列表
// 'lineheight',//行間距
]
],
// 編輯器不自動(dòng)被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器寬度
initialFrameWidth: '100%',
// 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口巢株，請(qǐng)勿在生產(chǎn)環(huán)境使用！Ｎ醯印８蟀）
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項(xiàng)目祠挫，通常不需要設(shè)置該選項(xiàng)那槽，vue-ueditor-wrap 會(huì)自動(dòng)處理常見(jiàn)的情況，如果需要特殊配置等舔，參考下方的常見(jiàn)問(wèn)題2
UEDITOR_HOME_URL: '/UEditor/'
},
//methods
ready(editorInstance) // 富文本初始化完成觸發(fā)
this.editor = editorInstance
},
// 添加自定義按鈕
addCustomButtom(editorId) {
let _this = this
window.UE.registerUI('test-button', function (editor, uiName) {
// 注冊(cè)按鈕執(zhí)行時(shí)的 command 命令倦炒，使用命令默認(rèn)就會(huì)帶有回退操作
editor.registerCommand(uiName, {
execCommand: function () {
let html = `<img src='https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80' />`
editor.execCommand('inserthtml', html);
}
});
// 創(chuàng)建一個(gè) button
var btn = new window.UE.ui.Button({
// 按鈕的名字
name: uiName,
// 提示
title: '上傳圖片',
// 需要添加的額外樣式，可指定 icon 圖標(biāo)软瞎，圖標(biāo)路徑參考常見(jiàn)問(wèn)題 2
cssRules: "background-image: url('http://erkong.ybc365.com/2644220200815163758435.png') !important;background-size: cover;",
// 點(diǎn)擊時(shí)執(zhí)行的命令
onclick: function () {
// 這里可以不用執(zhí)行命令，做你自己的操作也可
_this.editor.execCommand('inserthtml', '插入到編輯器的內(nèi)容');
}
});
// 當(dāng)點(diǎn)到編輯內(nèi)容上時(shí)拉讯，按鈕要做的狀態(tài)反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName);
if (state === -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
// 因?yàn)槟闶翘砑?button涤浇，所以需要返回這個(gè) button
return btn;
}/* 指定添加到工具欄上的哪個(gè)位置，默認(rèn)時(shí)追加到最后 */ /* 指定這個(gè) UI 是哪個(gè)編輯器實(shí)例上的魔慷，默認(rèn)是頁(yè)面上所有的編輯器都會(huì)添加這個(gè)按鈕 */);
},
// 添加自定義彈窗
addCustomDialog(editorId) {
window.UE.registerUI('test-dialog', function (editor, uiName) {
// 創(chuàng)建 dialog
var dialog = new window.UE.ui.Dialog({
// 指定彈出層中頁(yè)面的路徑只锭，這里只能支持頁(yè)面，路徑參考常見(jiàn)問(wèn)題 2
iframeUrl: '/customizeDialogPage.html',
// 需要指定當(dāng)前的編輯器實(shí)例
editor: editor,
// 指定 dialog 的名字
name: uiName,
// dialog 的標(biāo)題
title: '這是一個(gè)自定義的 Dialog 浮層',
// 指定 dialog 的外圍樣式
cssRules: 'width:500px;height:200px;',
// 如果給出了 buttons 就代表 dialog 有確定和取消
buttons: [
{
className: 'edui-okbutton',
label: '確定',
onclick: function () {
dialog.close(true);
}
},
{
className: 'edui-cancelbutton',
label: '取消',
onclick: function () {
dialog.close(false);
}
}
]
});
// 參考上面的自定義按鈕
var btn = new window.UE.ui.Button({
name: 'dialog-button',
title: '打開(kāi)秀米',
cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
onclick: function () {
// 渲染dialog
dialog.render();
dialog.open();
}
});
return btn;
} /* 指定添加到工具欄上的那個(gè)位置院尔，默認(rèn)時(shí)追加到最后 */ /* 指定這個(gè)UI是哪個(gè)編輯器實(shí)例上的蜻展，默認(rèn)是頁(yè)面上所有的編輯器都會(huì)添加這個(gè)按鈕 */);
},
//main.js
//引入這兩個(gè)文件喉誊，否則自定義的按鈕不出現(xiàn)圖標(biāo)
import '../public/UEditor/ueditor.config'
import '../public/UEditor/ueditor.all.js'
這樣就出現(xiàn)了自定義的按鈕
image.png
在這里你可以寫(xiě)你的邏輯，彈窗同理纵顾，就不多說(shuō)了
image.png
image.png
6.下面開(kāi)始集成秀米
第一步：下載文件
xiumi-ue-dialog-v5.js和xiumi-ue-v5.css和xiumi-ue-dialog-v5.html和xiumi-ue-internal.js,點(diǎn)這里可以打包下載
第二步：將下載的壓縮文件解壓伍茄，把里面的文件丟到UEditor/dialogs里
image.png
第三步：修改 xiumi-ue-dialog-v5.html，引入 xiumi-ue-internal.js
image.png
第四步：修改ueditor.config.js
xssFilterRules: false //本來(lái)是true施逾，改成false
inputXssFilter: false //本來(lái)是true敷矫，改成false
outputXssFilter: false //本來(lái)是true，改成false
article: ['style'], //本來(lái)是[ ]汉额，改成 ['style']
section: ['class',"style"], //本來(lái)是[ ] 曹仗，改成 ['class',"style"]
img: ['style', 'src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex','style','word_img'] //后面多加兩個(gè)值'style','word_img'
還有其他的，看自己需求更改配置
第五步： 在main.js中引入基本文件
//引入必要的文件 集成秀米所需
import '../public/UEditor/dialogs/xiumi-ue-dialog-v5'
import '../public/UEditor/dialogs/xiumi-ue-v5.css'
最后是這樣
image.png
image.png
image.png
教程到此結(jié)束蠕搜，交流+v 1115009958
補(bǔ)充 ：ueditor.all.js
options.cssRules = '.edui-notadd .edui-for-'+ btnName +' .edui-icon {'+ cssRules +'}' //.edui-default 改成 .edui-notadd
options.cssRules = '.edui-notadd .edui-for-'+ name +' .edui-dialog-content {'+ cssRules +'}' //.edui-default 改成 .edui-notadd
//notadd/css
注釋掉
/* .edui-notadd .edui-toolbar .edui-button .edui-icon::before,
.edui-notadd .edui-toolbar .edui-menubutton .edui-icon::before,
.edui-notadd .edui-toolbar .edui-splitbutton .edui-icon::before {
display: none;
} */
