百度富文本ueditor

关于百度富文本使用备忘
Vue 项目使用这个插件 vue-ueditor-wrap
需要将 https://gitee.com/msea/ueditor 下载到 public 文件夹内容 开始你的表演

修改配置

ueditor.config.js //里面写了基本配置

修改逻辑

注意富文本在运行中 默认访问 ueditor.all.min.js 如果没有 ueditor.all.js

采坑记录

图片缩放功能,导致内容在移动端显示不正常

缩放执行 鼠标移动事件 无法关闭 一直运行

注意 事件绑定在doc上

switch (console.log(e.type), e.type) {
    case "mousedown":
        // domUtils.on(i.doc, "mousemove",i.proxy(i._eventHandler, i))
        i.doc.onmousemove =  i.proxy(i._eventHandler, i)
        break;
    case "mousemove":
        ....
        break;
    case "mouseup":
        // domUtils.un(i.doc, "mousemove", i.proxy(i._eventHandler, i)),
        i.doc.onmousemove = null
}
// 修改事件注册方式

修改图片尺寸为固定尺寸,为百分比

图片缩放逻辑在 6300行左右 是一个插件

updateTargetElement: function () {
    var e = this,
        t = parseInt(e.resizer.style.width),
        i = parseInt(e.target.naturalHeight) * t / parseInt(e.target.naturalWidth);
        domUtils.setStyles(e.target, {
            width: setWidth(e.resizer.style.width),
            height: i + "px"
        });
        function setWidth(w) {
            // 时时将 当前宽度绑定 当前实例
            e.currentWidth = parseInt(w)
            return w
        }
},

注意 在当前图片失去焦点时将 设置px计算为百分比

hide: function () {
    var e = this;
    ...
    countWiodth(e.currentWidth)
    // 计算参照比例图片缩放参照比例
    function countWiodth(w) {
        if (!e.currentWidth === undefined) return
        var wSize = parseInt(w)
        var frameWidth = e.editor.ui.initialFrameWidth -20
        var countW = Math.round(wSize/frameWidth*100)
        var result = 0
        // 减去滚动条的误差
        if (countW <= 10) {
            result = '10%';
        } else if (countW >= 99) {
            result = '100%';
        } else {
            result = countW + '%'
        }
        console.log(result)
        // 重新调用设置方法
        domUtils.setStyles(e.target, {
            width: result,
            height: "auto"
        });
        // 删除绑定对象
        delete e.currentWidth 
    }

},

如果不要此功能

直接注释此插件 UE.plugins.fiximgclick