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

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

作者: 谢炳南 | 来源:发表于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);
        }
 
    });
};

相关文章

  • 公众号设置——内容推送

    分享图文:原创标记,公众号内部文章 web微信编辑器(富文本编辑器) 外部链接:分享图文,原文链接 投票:名称他人...

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

    微信公众号富文本编辑器使用百度ueditor插件为基础加以封装 百度ueditor配置提供替换皮肤,只要添加相应的...

  • 96编辑器使用注意事项小总结

    ≮ 使用96微信编辑器的注意事项≯ 首先要分清楚,96微信编辑器和微信公众号的区别。 96微信编辑器≠微信公众号 ...

  • 公众号12个排版工具大全

    135 编辑器 135编辑器官网-微信排版编辑器-微信公众号图文排版工具,好用素材多 新榜 新榜微信编辑器-让你的...

  • 微信公众号排版利器

    哪个微信公众号编辑器排版比较好用? 越来越多的公司和个人开通了自己的微信公众号,微信公众号平台是最热的新媒体平台之...

  • R语言爬虫与文本分析

    原文链接:R语言爬虫与文本分析 微信公众号:机器学习养成记 搜索添加微信公众号:chenchenwings 之前...

  • 个人博客一|抓取崔庆才个人博客网站前端源码

    1、准备 工具:仿站小工具+V9.0 工具获取方式一: 关注微信公众号 微信公众号『stormsha』,后台回复『...

  • 微信公众号 Markdown 编辑器

    微信公众号文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由...

  • 2.8 输入控件(二)

    2.8.3 QTextEdit 富文本编辑器 2.8.3.1 富文本编辑器 与普通的纯文本相比,富文本其实就是可以...

  • 十九大讲话文本分析(R语言)

    原文链接:十九大讲话文本分析(R语言) 微信公众号:机器学习养成记 搜索添加微信公众号:chenchenwing...

网友评论

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

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