美文网首页微信
仿微信公众号富文本编辑器

仿微信公众号富文本编辑器

作者: 谢炳南 | 来源:发表于2019-04-04 15:14 被阅读0次
    • 微信公众号富文本编辑器使用百度ueditor插件为基础加以封装
    • 百度ueditor配置提供替换皮肤,只要添加相应的样式即可(码云代码链接)
      TIM截图20190404150153.png

    以下处理富文本编辑器里面内容是别处复制粘贴而来(如果是微信或者百度的图片资源,有些图片不会显示出来),此时需要我们自行上传粘贴内容里面的图片和背景图片

    处理图片以及处理背景图片

    打开ueditor.all.js文件里找到catchremoteimage,修改如下几部分代码

    UE.plugins['catchremoteimage'] = function () {
        var me = this,
            ajax = UE.ajax;
     
        /* 设置默认值 */
        if (me.options.catchRemoteImageEnable === false) return;
        me.setOpt({
            catchRemoteImageEnable: false
        });
     
        me.addListener("afterpaste", function () {
            me.fireEvent("catchRemoteImage");
        });
     
        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"),
                backgroundimagestags = domUtils.getElementsByTagName(me.document, "section span div p "),//抓取背景图片所在的标签
                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;
            };
     
            //img标签
            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);
                }
            }
     
            //背景图片所在标签
            var backgroundimages = [];
            //console.log("背景图片个数:" + backgroundimagestags.length);
            for (var i = 0, backci; backci = backgroundimagestags[i++];) {
     
                var bstyle = backci.style;
                var backgroundimgurltag = bstyle['background-image'] || bstyle['background'] || "";
                if (backgroundimgurltag != null && backgroundimgurltag != "") {
                    // 避免background:initial
                    if(backgroundimgurltag.split("(")[1]){
                        var backsrc = backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "")
                                  || "";
                        //console.log("ci_src:" + backsrc);
                        if (backsrc != null && backsrc != "") {
                            if (/^(https?|ftp):/i.test(backsrc) && !test(backsrc, catcherLocalDomain)) {
                                backgroundimages.push(backsrc);
                                remoteImages.push(backsrc);
                            }
                        }
                    }
                }
                //console.log("remoteImages个数:" + remoteImages.length);
            }
     
            if (remoteImages.length) {
                me.fireEvent('catchremotestart');
                catchremoteimage(remoteImages, {
                    //成功抓取
                    success: function (r) {
                        try {
                            var info = r.state !== undefined ? r:eval("(" + r.responseText + ")");
                        } catch (e) {
                            return;
                        }
     
                        /* 获取源路径和新路径 */
                        var i, j, ci, cj, oldSrc, newSrc, list = info.list;
                       
                        
                        //img标签的替换
                        for (i = 0; ci = imgs[i++];) {
                            oldSrc = ci.getAttribute("_src") || ci.src || "";
                            for (j = 0; cj = list[j++];) {
                                if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理
                                    newSrc = catcherUrlPrefix + cj.url;
                                    domUtils.setAttributes(ci, {
                                        "src": newSrc,
                                        "_src": newSrc
                                    });
                                    break;
                                }
                            }
                        }
     
                        //背景图片地址的替换
                        var bodyHtml = me.document.body.innerHTML;
                        //console.log("上传之前html:" + bodyHtml);
                        for (var a = 0; a < backgroundimages.length; a++) {
                            oldSrc = backgroundimages[a] || "";
                            for (j = 0; cj = list[j++];) {
                                if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理
                                    newSrc = catcherUrlPrefix + cj.url;
                                    //console.log("上传之后oldSrc:" + oldSrc);
                                    //console.log("上传之后newSrc:" + newSrc);
                                    //console.log("上传之后html:" + me.document.body.innerHTML.replace(oldSrc, newSrc));
                                    bodyHtml = bodyHtml.replace(oldSrc, newSrc);
                                    break;
                                }
                            }
                        }
                        me.document.body.innerHTML = bodyHtml;
     
                        me.fireEvent('catchremotesuccess');
                        me.fireEvent('catchremotecomplete');
                    },
                    //回调失败,本次请求超时
                    error: function () {
                        me.fireEvent("catchremoteerror");
                    }
                });
            }
     
            function catchremoteimage(imgs, callbacks) {
                //console.log("1111L:" + imgs.length);
                var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
                    url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params),
                    isJsonp = utils.isCrossDomainUrl(url),
                    opt = {
                        'method': 'POST',
                        'dataType': isJsonp ? 'jsonp':'',
                        'timeout': 60000, //单位:毫秒,回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值
                        'onsuccess': callbacks["success"],
                        'onerror': callbacks["error"]
                    };
                opt[catcherFieldName] = imgs;
                ajax.request(url, opt);
            }
     
        });
    };
    

    相关文章

      网友评论

        本文标题:仿微信公众号富文本编辑器

        本文链接:https://www.haomeiwen.com/subject/wfafiqtx.html