前言：ueditor是百度开源的一款富文本编辑器，还是比较流行的，之前有写过一篇vue后台管理项目中使用froala-editor富文本编辑器教程，froala-editor是一个收费的编辑器，主题皮肤都挺好看的，并且支持v-model,十分的方便，但是想要集成第三方的编辑器就不太行了，比如集成秀米。看个人需求吧，ueditor百度编辑器的默认主题皮肤真心丑，我是看不下去，所以决定换肤！！先上两张对比图～
换肤前
换肤后
1. 先去ueditor官网按照需求下载
image.png
2. 下载解压后名字改成UEditor，丢到vue项目中的public目录下（或者static下）
image.png
3. 安装vue-editor-wrap
cnpm i vue-ueditor-wrap -S
//引入组件
import VueUeditorWrap from 'vue-ueditor-wrap' //es6
//注册组件
components: {
VueUeditorWrap
},
//template
<vue-ueditor-wrap v-model="msg" :config='myConfig'></vue-ueditor-wrap>
// data
msg: '',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
UEDITOR_HOME_URL: '/UEditor/'
}
没有失误的话，是这个样子的。
image.png
4. 接下来就是换肤了。
换肤也比较简单，就是重写css，在
ueditor.config.js中，把theme:'default'的注释打开，修改成theme:'notadd'，然后把准备好的css丢到public/UEditor/themes下,在public/UEditor/themes/iframe.css中添加
img {
max-width: 100%;
height: auto;
}
像这样。
image.png
ps:皮肤文件+v 1115009958 索取,不是无偿的，请知悉
然后编辑器就变成了这个样子。
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', //撤销
'redo', //前进
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'fontborder', //字符边框
'formatmatch', //格式刷
// 'fontfamily', //字体
'fontsize', //字号
'justifyleft', //居左对齐
'justifycenter', //居中对齐
'justifyright', //居右对齐
// 'justifyjustify', //两端对齐
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
// 'lineheight',//行间距
]
],
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
UEDITOR_HOME_URL: '/UEditor/'
},
//methods
ready(editorInstance) // 富文本初始化完成触发
this.editor = editorInstance
},
// 添加自定义按钮
addCustomButtom(editorId) {
let _this = this
window.UE.registerUI('test-button', function (editor, uiName) {
// 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
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);
}
});
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '上传图片',
// 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
cssRules: "background-image: url('http://erkong.ybc365.com/2644220200815163758435.png') !important;background-size: cover;",
// 点击时执行的命令
onclick: function () {
// 这里可以不用执行命令，做你自己的操作也可
_this.editor.execCommand('inserthtml', '插入到编辑器的内容');
}
});
// 当点到编辑内容上时，按钮要做的状态反射
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);
}
});
// 因为你是添加 button，所以需要返回这个 button
return btn;
}/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */ /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
},
// 添加自定义弹窗
addCustomDialog(editorId) {
window.UE.registerUI('test-dialog', function (editor, uiName) {
// 创建 dialog
var dialog = new window.UE.ui.Dialog({
// 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
iframeUrl: '/customizeDialogPage.html',
// 需要指定当前的编辑器实例
editor: editor,
// 指定 dialog 的名字
name: uiName,
// dialog 的标题
title: '这是一个自定义的 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: '打开秀米',
cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
onclick: function () {
// 渲染dialog
dialog.render();
dialog.open();
}
});
return btn;
} /* 指定添加到工具栏上的那个位置，默认时追加到最后 */ /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
},
//main.js
//引入这两个文件，否则自定义的按钮不出现图标
import '../public/UEditor/ueditor.config'
import '../public/UEditor/ueditor.all.js'
这样就出现了自定义的按钮
image.png
在这里你可以写你的逻辑，弹窗同理，就不多说了
image.png
image.png
6.下面开始集成秀米
第一步：下载文件
xiumi-ue-dialog-v5.js和xiumi-ue-v5.css和xiumi-ue-dialog-v5.html和xiumi-ue-internal.js,点这里可以打包下载
第二步：将下载的压缩文件解压，把里面的文件丢到UEditor/dialogs里
image.png
第三步：修改 xiumi-ue-dialog-v5.html，引入 xiumi-ue-internal.js
image.png
第四步：修改ueditor.config.js
xssFilterRules: false //本来是true，改成false
inputXssFilter: false //本来是true，改成false
outputXssFilter: false //本来是true，改成false
article: ['style'], //本来是[ ]，改成 ['style']
section: ['class',"style"], //本来是[ ] ，改成 ['class',"style"]
img: ['style', 'src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex','style','word_img'] //后面多加两个值'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
教程到此结束，交流+v 1115009958
补充 ：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;
} */
网友评论