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）

具体实现：

结果展示

字间距和两端缩进

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"的盒子：类似于

设置

.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;
}