UEditor使用总结
前言
UEditor的bug太多了，为了避免大家浪费时间，把自己这几天在扩展UEditor功能时遇到的问题总结一下，希望能帮到大家 ，我是在vue框架中使用的UEditor插件，可能你在其他前端框架中使用，具体代码可能有一点点不同，但实现逻辑一样。我在做这些功能时主要参考了这几个也基于UEditor扩展的编辑器：135编辑器、96编辑器等
PM提的各种需求如下：
UEditor图片等比缩放
UEditor中的所有图片都是按原图的比例等比缩放
UEditor作者已经在github上提供了具体解决方法：
具体修改在ueditor.all.js 16995行(大致位置大家自己找吧) 或者 在ueditor.all.js搜索 updateTargetElement 这个方法名也行
updateTargetElement: function () {
var me = this;
var newWidth = parseInt(me.resizer.style.width);
// var newHeight = parseInt(me.resizer.style.height);
var oldHeight = parseInt(me.target.naturalHeight);
var oldWidth = parseInt(me.target.naturalWidth);
var c =(oldHeight*newWidth)/oldWidth;
domUtils.setStyles(me.target, {
'width': me.resizer.style.width,
'height': c+'px'
});
// var scale = parseInt(me.target.height)/parseInt(me.target.width);
// me.target.width = parseInt(me.resizer.style.width);
// me.target.height = parseInt(me.target.width)*scale;
// me.target.width = parseInt(me.resizer.style.width);
// me.target.height = parseInt(me.resizer.style.height);
me.attachTo(me.target);
}
链接如下：https://github.com/fex-team/ueditor/pull/2257
UEditor换图操作
要求换的图片替换当前图片，并且大小尺寸一样
这个需求我参考 135编辑器 偷了个懒，直接把图片操作浮层上的修改按钮改成换图。因为UEditor提供的修改图片功能就是替换一下图片，宽高没变。
具体操作就是在zh-cn.js文件里，搜索'modify':‘修改’，换成'modify':'换图' 就好了！
UEditor工具栏新增下拉框，实现两端缩进和字间距功能
两端缩进功能是在段落标签上加上padding-left，padding-right样式，选项为（0-3em）
字间距功能是在段落标签上加上letter-spacing，选项为（0-3px）
具体实现：
<template>
<div class="UE-editor-wrapper">
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
mounted () {
const _this = this
this.editor = window.UE.getEditor('editor', this.config) // 初始化UE
this.editor.addListener('ready', function () {}
},
methods: {
//设置两端缩进
setJustify () {
let objItems = [{id: 0, name: '默认'}, {id: 1, name: '1em'}, {id: 2, name: '2em'}, {id: 3, name: '3em'}]
window.UE.registerUI('justifyjustifycenter', function (editor, uiName) {
editor.registerCommand(uiName, {
execCommand: function (cmdName, item) {
this.execCommand('paragraph', 'p', {style: 'padding-left: ' + item.value + 'em; padding-right: ' + item.value + 'em'})
return true
}
})
let items = []
for (var i = 0; i < objItems.length; i++) {
var item = objItems[i]
items.push({
label: item['name'],
value: item['id']
})
}
let combox = new window.UE.ui.Combox({
editor: editor,
items: items,
onselect: function (t, index) {
editor.execCommand(uiName, this.items[index])
},
title: '两端缩进',
initValue: '两端缩进'
})
return combox
}, [42]) // [42]控制下拉框在工具栏的位置
},
// 设置字间距
setLetterSpacing () {
let objItems = [{id: 0, name: '默认'}, {id: 1, name: '1px'}, {id: 2, name: '2px'}, {id: 3, name: '3px'}]
window.UE.registerUI('replacekey', function (editor, uiName) {
editor.registerCommand(uiName, {
execCommand: function (cmdName, item) {
this.execCommand('paragraph', 'p', {style: 'letter-spacing:' + item.value + 'px'})
return true
}
})
var items = []
for (var i = 0; i < objItems.length; i++) {
var item = objItems[i]
items.push({
label: item['name'],
value: item['id']
})
}
var combox = new window.UE.ui.Combox({
editor: editor,
items: items,
onselect: function (t, index) {
editor.execCommand(uiName, this.items[index])
},
title: '字间距',
initValue: '字间距'
})
return combox
}, [33]) // [33]控制下拉框在工具栏的位置
}
},
created () {
// 设置两端缩进
this.setJustify()
// 设置字间距
this.setLetterSpacing()
}
}
</script>
结果展示
字间距和两端缩进
UEditor工具栏新增按钮
我没有这个需求，但实现方法不难，参考一下这个吧。https://blog.csdn.net/zzq900503/article/details/77050823
UEditor引用样式修改
类似于简书这样的引用样式
实现方法：
在/themes/iframe.css 这个文件下面加上
.view .view blockquote { /*加上.view .view是因为防止污染全局的blockquote样式*/
padding: 12px 20px;
background-color: #f2f2f2;
border-left: 6px solid #b3b3b3;
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin: 0 0 20px;
}
UEditor增加字体选项
字体选项新增：（Optima-Regular, PingFangTC-light）、Zapfino、Futura-Medium、MarkerFelt-Thin、Cochin-BoldItalic、CourierNewPS-ItalicMT
实现方法：
修改三个文件：ueditor.config.js、zh-cn.js、en.js。搜索fontfamily，在fontfamily处添加需要的字体类型即可。参考：https://blog.csdn.net/shiwodecuo/article/details/51644186
UEditor图片伸缩框位置bug
这个问题是我设置config：{autoHeightEnabled: false}出现滚动条时，图片选中时的伸缩框位置定位不对，我也不太清楚为什么。可能是我使用的版本有问题，问题见下图：
图片伸缩框位置不对
这个问题我没看出问题出在什么地方了，但是通过css设置解决了。
具体实现：
- 第一步，设置config：{autoHeightEnabled: true}。
这样编辑框就能无限延长，定位问题就解决了，但是项目中编辑器一定是有定高的，所以我们要给整个编辑器外面加个class="edit-wrapper"的盒子：类似于
<div class="edit-area" ref="editArea">
<div class="edit-area-box"></div> <!--这个垫片对工具栏固定定位有用，后面会说-->
<div class="edit-wrapper">
<editor :defaultMsg="profileValue" :config="config" @openImgUpload="openImgUpload" ref="ue"></editor>
</div>
</div>
设置
.edit-area {
width: 100%;
height: 100%;
overflow: auto;
}
这时，图片伸缩框可以正常定位了，但是出现滚动条时，工具栏也跟着滚动了
工具栏不能固定
- 第二步，固定工具栏
具体参靠以下代码：
```.edit-area-box { /*工具栏的空盒子垫片，高度就是工具栏的高度，自己量~*/
width: 100%;
height: 110px;
}
.edit-area { /*编辑器的高度*/
width: 100%;
height: calc(100% - 110px);
overflow: auto;
}
/deep/ .edui-editor-toolbarbox { /*编辑器工具栏固定定位，脱离文档流，位置自己调，记得设置宽度*/
position: fixed !important;
top: 20px !important;
width: 500px !important;
}
/deep/ .UE-editor-wrapper {
height: 100%;
overflow: auto;
}
/*这个也很重要，不知道是不是工具栏脱离文档流时引起的bug，就是出现滚动条时，输入文字时，编辑区域顶部出现一段空白，我看了一下是个有高度的空盒子，估计是作者在出现滚动条时，计算了一下工具栏的高度，而我们的工具栏已经脱离文档流了，所以把这个空盒子的高度设置为auto就好了*/
/deep/ .edui-editor {
&.edui-default {
& > :first-child {
height: auto !important;
}
}
}
}
-
第三步，到这时基本大功告成，但还有一个小问题，就是出现滚动条时，编辑内容，编辑区域跳动，然后就有下面这种情况了:
image.png
继续改进！找到/themes/iframe.css ，加上
.view body.view { /*把编辑区域的iframe窗口的body的默认margin：8px，*/
margin: 0 8px;
}
