在UEditor编辑器的工具栏上加一行文字或按钮

微wx笑 2022-01-23【网页网站】248 3 0关键字： UEditor 编辑器

有时候我们可能需要在UEditor编辑器的工具栏上加一行文字或按钮，用来提示一些信息，当前一些耗时操作的状态，比如远程图片的抓取。

之前遇到一个问题：百度UEditor粘贴内容包含大量远程图片抓取失败的问题yZI无知

问题虽然解决了，但是并不完美，很多状态提示信息是通过控制台输出的，不打开开发者工具根本看不到，使用体验比较差，于是就想到在工具栏上添加一个输出提示信息的功能。yZI无知

完成后的效果：yZI无知

yZI无知

示例代码：yZI无知

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>UEditor简单功能</h1>
    <!--style给定宽度可以影响编辑器的最终宽度-->
    <script type="text/plain" id="myEditor">
        <p>这里我可以写一些输入提示</p>
    </script>
    <script type="text/javascript">
        var ue = UE.getEditor('myEditor',{
            //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
            toolbars:[['insertimage']],
            //focus时自动清空初始化时的内容
            autoClearinitialContent:true,
            //关闭字数统计
            wordCount:false,
            //关闭elementPath
            elementPathEnabled:false,
            //默认的编辑区域高度
            initialFrameHeight:300
            //更多其他参数，请参考ueditor.config.js中的配置项
        });
        ue.ready(function () {
            $(".edui-toolbar").append('<div style="float:left;">请点击按钮上传图片</div>');
        });
    </script>
</body>
</html>

有时候可能不只是需要添加文字的提示信息，还需要添加按钮操作，以下代码是写在UEditor代码内部的：
yZI无知

        function catchremoteimageGetTip(){
          var upload_tip = $("#edui_upload_tip");
          if (upload_tip.length == 0){
            $(".edui-toolbar").append('<div id="edui_upload_tip" class="edui-box edui-default" style="padding: 5px;"></div>');
            upload_tip = $("#edui_upload_tip");
          }
          return upload_tip;
        }
         
        function catchremoteimageRetry(){
          var upload_tip = catchremoteimageGetTip();
          if (upload_tip.length > 0){
             var retry = $("<a>重试</a>");
             $(retry).click(function(){ me.fireEvent("catchRemoteImage"); });
             upload_tip.append(" ");
             upload_tip.append(retry);
          }else{
            console.log("catchremoteimageTip，无法获取或创建edui_upload_tip引用"); 
          }
        }

代码的功能是在工具栏的后面添加一个id="edui_upload_tip"的div用于显示提示信息，yZI无知

如果调用“catchremoteimageRetry()”，还可以在后面添加一个重试的按钮，功能是重新调用远程图片的抓取。yZI无知

下面的代码是提示信息的处理：yZI无知

        function catchremoteimageTip(tipStr, callbackInfo) {
          //本方法用于在工具栏上显示抓取远程图片的提示信息
          if (typeof tipStr == 'undefined'){ return; }
           
          var upload_tip = catchremoteimageGetTip();
          if (upload_tip.length > 0){
            if (typeof callbackInfo == 'undefined'){
              upload_tip.text(tipStr); 
            }else{
                if (tipStr.length > 0){
                  tipStr += "，"; 
                }
                if (callbackInfo.state && callbackInfo.state == 'SUCCESS'){
                   var listCount = 0;
                   for (var i = 0; i < callbackInfo.list.length; i++){
                     if (callbackInfo.list[i].state == "SUCCESS"){
                        listCount++;
                     }
                   }
                   remoteImagesLength -= listCount;
                   if (listCount == callbackInfo.list.length){
                     if (remoteImagesLength < 1){
                       upload_tip.text(tipStr+ "本次成功" + listCount + "张，全部抓取完成");
                     }else{
                       upload_tip.text(tipStr+ "本次成功" + listCount + "张，剩余" + remoteImagesLength + "张");
                     }
                   }else{
                     upload_tip.text(tipStr+ "本次成功" + listCount + "张，失败" + (callbackInfo.list.length - listCount) + "张");
                   }
                }else{
                   upload_tip.text(tipStr+ "服务器返回失败，详情请查看控制台输出");
                }
            }
          }else{
            console.log("catchremoteimageTip，无法获取或创建edui_upload_tip引用"); 
          }
        }

抓取事件处理函数yZI无知

100

101

102

103

104

105

106

107

108

109

110

    me.addListener("catchRemoteImage", function () {
 
        var catcherLocalDomain = me.getOpt('catcherLocalDomain'),
            catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')),
            catcherUrlPrefix = me.getOpt('catcherUrlPrefix'),
            catcherFieldName = me.getOpt('catcherFieldName');
 
        var remoteImages = [],
            imgs = domUtils.getElementsByTagName(me.document, "img"),
            test = function (src, urls) {
                if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) {
                    return true;
                }
                if (urls) {
                    for (var j = 0, url; url = urls[j++];) {
                        if (src.indexOf(url) !== -1) {
                            return true;
                        }
                    }
                }
                return false;
            };
 
        for (var i = 0, ci; ci = imgs[i++];) {
            if (ci.getAttribute("word_img")) {
                continue;
            }
            var src = ci.getAttribute("_src") || ci.src || "";
            if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {
                remoteImages.push(src);
            }
        }
         
        catchremoteimageTip(remoteImages.length + " 张图片待抓取");
         
        if (remoteImages.length) {
            console.log("remoteImages.length",remoteImages.length);
            console.log("开始分段抓取远程图片......");
            if (remoteImagesLength == 0){
              catchremoteimageTip("开始分段抓取，总计" + remoteImages.length + "张");
              remoteImagesLength = remoteImages.length;
            }else{
              catchremoteimageTip("分段抓取中，剩余" + remoteImages.length + "张");
            }
             
            var pk = 0;
            //while (pk < remoteImages.length){
              var imgPart = [],pkBegin = pk;
              for (var k = 0; k < 5; k++){
                if (pk < remoteImages.length){
                  imgPart.push(remoteImages[pk]);
                  pk++;
                }
              }
              console.log("imgPartBegin", pkBegin, "End", pk);
              if (imgPart.length) {
                console.log("imgPart", imgPart);
                catchremoteimage(imgPart, {
                  //成功抓取
                  success: function (r) {
                      try {
                          var info = r.state !== undefined ? r:eval("(" + r.responseText + ")");
                          console.log("info", info);
                          catchremoteimageTip("", info);
                      } catch (e) {
                          catchremoteimageTip("r.responseText转换json对象失败");
                          catchremoteimageRetry();
                          console.log(e);
                          return;
                      }
 
                      /* 获取源路径和新路径 */
                      var i, j, ci, cj, oldSrc, newSrc, list = info.list,succecsCount = 0;
 
                      for (i = 0; ci = imgs[i++];) {
                          oldSrc = ci.getAttribute("_src") || ci.src || "";
                          for (j = 0; cj = list[j++];) {
                              if (oldSrc == cj.source.replace(/&amp;/ig, "&") && cj.state == "SUCCESS") {  //抓取失败时不做替换处理
                                  succecsCount++;
                                  newSrc = catcherUrlPrefix + cj.url;
                                  domUtils.setAttributes(ci, {
                                      "src": newSrc,
                                      "_src": newSrc
                                  });
                                  break;
                              }
                          }
                      }
                      me.fireEvent('catchremotesuccess');
                      if (succecsCount == 0){
                        catchremoteimageTip("本次抓取全部失败");
                        catchremoteimageRetry();
                      }else{
                        setTimeout(function(){
                          me.fireEvent("catchRemoteImage");
                        },2000);
                      }
                  },
                  //回调失败，本次请求超时
                  error: function () {
                      me.fireEvent("catchremoteerror");
                      catchremoteimageTip("图片抓取失败，请求超时");
                      catchremoteimageRetry();
                  }
                });
              }
            //}
        }else{
          remoteImagesLength = 0;
        }