ueditor图片样式改为百分比

将图片样式改为百分比

该功能是为了让图片适配移动端页面，让图片大小样式由px改变为相对于父级宽度的百分比大小。

最终效果

不浪费时间，直接看最后实现的效果

实现方法

1. 禁用改变图片px的方法，该方法是fiximgclick插件中的立即函数
   
   
   并关闭与这些方法相关的函数调用，让控制台不报错

   2. 在点击图片的弹出的框中 加入修改图片百分比的样式，做成可以拖动改变的百分比。改变selectionchange选区插件中的str

   var reg = /^\d*\.?\d*\%$/;//判断图片的样式是否为百分比的正则表达式
   let width = reg.test(img.getAttribute("width"))? img.getAttribute("width") : "100%";//如果图片样式为百分比获取该值，不是则默认为得到100%
   img.setAttribute("height","");//不设置图片高度，让它跟随图片的宽度进行变动
   //let aUrl = img.getAttribute("_url");
   
   '<span οnclick=$$._onImgSetFloat("none") class="edui-clickable">' + editor.getLang("default") + '</span>&nbsp;&nbsp;' +
   '<span οnclick=$$._onImgSetFloat("left") class="edui-clickable">' + editor.getLang("justifyleft") + '</span>&nbsp;&nbsp;' +
   '<span οnclick=$$._onImgSetFloat("right") class="edui-clickable">' + editor.getLang("justifyright") + '</span>&nbsp;&nbsp;' +
   '<span οnclick=$$._onImgSetFloat("center") class="edui-clickable">' + editor.getLang("justifycenter") + '</span>&nbsp;&nbsp;'+
   '<span οnclick="$$._onImgEditButtonClick(\'' + dialogName + '\');" class="edui-clickable">' + editor.getLang("modify") + '</span>&nbsp;&nbsp;';
   if(img.className.indexOf(!("edui-faked-video") != -1 || img.className.indexOf("edui-upload-video") != -1 || img.className.indexOf("edui-faked-audio") != -1 || img.className.indexOf("edui-upload-audio") != -1)){//当图片不为视频或者音频显示的图片
       //es6模板字符串，有浏览器可能不能解析
   	str += `<div>更改当前大小(0-100%)</div>
   
            <div class="imgsizecompent" style="width:350px;height:40px;position:relative;">
   <!-- 进度条范围: 对应总长度 -->
            	<div class="imgsizescroll" style="width:300px;height:8px;position:absolute; width: 300px;height: 7px;position: absolute;top: 40%;left: 20px;background-color: #ccc;">
   <!-- 进度条滑块: 滑动改变图片大小 -->
            		<div οnmοusedοwn="$$._onImgEditSize()" class="imgsizebar" style="width:7px;height:13px;position:absolute;left:${width};margin-top: -3px;background: #369;z-index:1;"></div>
   <!-- 进度条进度 -->
             		<div class="imgsizemask" style="width:${width};height:7px;backgroundcolor:#369;position:absolute;left:0;top:0;"></div>
            	</div>
            </div>
   <!-- 宽度百分比样式显示 -->
            <span class="imgsizedemo slide_imgsizedemo1" style="font-weight:600;">${width}</span>`
   	}
   str += '</nobr>';
   !html && (html = popup.formatHtml(str))
   }
   
   

   实现οnmοusedοwn="$$._onImgEditSize()"，加到前面按钮相同的位置baidu.editor.ui.Popup方法中。

    _onImgEditSize: function(){
                       let img = editor.selection.getRange().getClosedNode(),
                           width = null;
   
                       let imgsizecompent = document.querySelector(".imgsizecompent"),
                           imgsizescroll = document.querySelector(".imgsizescroll"),
                           imgsizebar = document.querySelector(".imgsizebar" ),
                           imgsizemask = document.querySelector(".imgsizemask" ),
                           imgsizedemo = document.querySelector(".imgsizedemo"),
                           nobr = document.querySelector("nobr");
                       bool = true;
   
                       imgsizecompent.onmousemove = (ev) => {
                           var ev = ev || window.event;
                           if (bool == true) {
                               //原生js、jq、es6都只了解一丢丢，这个实现方法还有很多可以优化的地方
                               let Coords = ev.clientX - $('.imgsizescroll').offset().left;
                               let W = imgsizescroll.offsetWidth;
                               if (Coords > W) Coords = W;
                               if (Coords < 0) Coords = 0;
                               width = Math.ceil(Coords / W * 100)+"%";
                               imgsizebar.style.left = width;
                               imgsizemask.style.width = width;
                               img.style.width = width;
                               img.setAttribute("width", width);
                               imgsizedemo.innerText = width;
                           }
                           document.onmouseup = function() {
                               bool = false;
                           }
                           nobr.onmouseleave =()=> {
                               this.hide();
                           }
                       }
                   },
   

   效果图