前言：
-
使用百度编辑器，重写上传功能，将编辑器的上传图片，上传音视频功能禁用，在工具栏中多加一个上传文件的功能（这是一个文件柜，支持上传图片/音频/视频/压缩文件/文本文档）
-
将ueditor封装成组件，编辑器的id要随机生成的，这里编辑器的id我拿的是时间戳
this.editorId = String(new Date().getTime()) -
修改编辑器的ueditor.config.js配置文件
（1）编辑器的默认层级过高，修改编辑器的默认层级
（2）插入图片时，需要为图片增加style样式
UEditor组件封装
<template>
<div>
<div :style="{ overflow: 'hidden'}">
<div :style="ueditorStyle">
<script :id="editorId" type="text/plain" :style="ueditorStyle"></script>
</div>
</div>
<!-- 上传文件弹层 -->
<FileGroupModal v-if="showObj.visible"
@cancel="showObj.visible = false"
:sysType="sysType"
@changeImgUrl="(files) => { changeFileCabinets(files)}" />
</div>
</template>
<script>
import FileGroupModal from "@/components/FileGroupModal";
let showObj ={
visible: false
}
export default {
name: 'UE',
components: {
FileGroupModal
},
data () {
return {
editorId: '',
modalStatus: true,
editor: null,
showObj: showObj,
insertImgList: []
}
},
props: {
defaultValue: {
type: String
},
config: {
type: Object
},
ueditorStyle: {
type: Object,
default: ()=>{
return {
width: '600px',
minHeight: '600px'
}
}
},
sysType: {
// 模块类型，mall（商城）、sitecms（网站）、common（公共）、develop（开发）【不传查询所有】
type: String,
default: 'common'
},
},
watch: {
'defaultValue': function (newVal, oldValue) {
if (this.editor) {
this.editor.setContent(this.defaultValue || ''); // 确保UE加载完成后，放入内容。
}
}
},
created() {
this.editorId = String(new Date().getTime())
},
mounted() {
let mountedTimeout = setTimeout(()=>{
this.initUEditor()
clearTimeout(mountedTimeout)
}, 100)
},
methods: {
initUEditor: function() {
let _this = this;
window.UE.registerUI(
"test-dialog",
function(editor, uiName) {
// 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
var btn = new window.UE.ui.Button({
name: "dialog-button",
title: "上传文件",
cssRules: `background-image: url('/images/upload-img-icon.png') !important; background-size: cover;`,
onclick: function() {
// 渲染dialog
showObj.visible = true;
editor.execCommand(uiName);
}
});
return btn;
},
100 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */,
'' /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
);
let toolbars = [
[
"source", // html
'undo', //撤销
'redo', //重做
'bold', //加粗
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'horizontal', //分隔线
'removeformat', //清除格式
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
// 'simpleupload', //单图上传
// 'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
// 'insertvideo', //视频
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'imagecenter', //居中
'lineheight', //行间距
'customstyle', //自定义标题
'inserttable', //插入表格
]
]
this.editor = UE.getEditor(this.editorId, this.config ? this.config : {
toolbars: toolbars,
autoHeightEnabled: false
});
// 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultValue); // 确保UE加载完成后，放入内容。
});
// 监听全屏事件，修改全屏样式
this.editor.addListener('beforefullscreenchange',function(event,isFullScreen){
let screenchangeTimeout = setInterval(()=>{
let editorIdDom = document.getElementById(_this.editorId)
if (editorIdDom) {
let edui1 = editorIdDom.getElementsByClassName('edui-editor')
let edui1_iframeholder = editorIdDom.getElementsByClassName('edui-editor-iframeholder')
if (isFullScreen) {
for (let i=0; edui1 && i< edui1.length; i++) {
let itemEdui = edui1[i]
itemEdui.style.width = (!_this.$store.state.menuFixed ? _this.$store.state.windowWidth - 40 : _this.$store.state.windowWidth - 220) + 'px'
itemEdui.style.maxHeight = (_this.$store.state.windowHeight - 125) + 'px';
itemEdui.style.overflow = 'auto';
itemEdui.style.position = 'fixed';
itemEdui.style.zIndex = '99';
itemEdui.style.margin = !_this.$store.state.menuFixed ? '105px 0 0 20px' : '105px 0 0 200px'
}
for (let i=0; edui1_iframeholder && i< edui1_iframeholder.length; i++) {
let itemIframe = edui1_iframeholder[i]
itemIframe.style.maxHeight = (_this.$store.state.windowHeight - 200) + 'px';
}
}
if (edui1) {
clearInterval(screenchangeTimeout)
}
}
}, 50)
})
},
changeFileCabinets: function (files, item) {
this.insertImgList = files || []
this.insertImgList.filter(row=>{
this.insertFile(row)
})
this.showObj.visible = false
},
// 在光标位置插入图片
insertFile(file) {
this.showObj.visible = false;
let htmlStr = ''
let fileUrl = this.$env.fileUrl + '/' + file.fileKey
if (file.fileType && file.fileType.indexOf('image') >=0) {
htmlStr = '<img width="auto" style="max-width: 100%;" src="'+ fileUrl + '"/>'
} else if (file.fileType && file.fileType.indexOf('audio') >=0) {
htmlStr = '<audio controls width="94%" style="margin: 0 3%;max-width: 100%;" src="'+ fileUrl + '"/>'
} else if (file.fileType && file.fileType.indexOf('video') >=0) {
htmlStr = '<video controls width="94%" style="margin: 0 3%;max-width: 100%;" src="'+ fileUrl + '"/>'
} else {
htmlStr = '<a href="' + fileUrl + '">' + file.fileName + '</a>'
}
this.editor.execCommand("insertHtml", htmlStr);
},
getUEContent() {
// 获取内容方法
this.$emit('onChange', this.editor.getContent());
}
},
destroyed() {
this.editor.destroy();
}
}
</script>
<style>
/*增加自定义图片图标*/
.edui-default .edui-for-dialog-button {
background-image: url(../images/upload-img-icon.png) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
</style>