ueditor 富文本编辑器粘贴图片时让图片居中

需求
今天碰到个需求,客户要求在把微信公众号中的文章粘贴到富文本框时将文字向左对齐,图片居中
作为一个已经几年没碰前端的我来说有点头大,百度google了一番未果,只好自己研究去了
花了2个多小时终于搞定

话不多说,直接上代码
主要是 retainOnlyLabelPasted 和 filterRules
retainOnlyLabelPasted 会删掉所有乱七八糟的格式
filterRules 配置很多标签粘贴时的过滤规则,其中我配置了

img:function(node){
	    console.log(node.getAttr("style"));
	    node.setAttr('style','display:block;margin:0 auto;');
	    console.log(node.getAttr("style"));
	},

主要是重置一下style
其他的啥也没改
至于这个node怎么用可以去下面的API链接看

然后其他的配置都是官网默认的的

还有一个autotypeset 不知道做什么用的
设置的那些东西似乎没有生效
不过既然写好了就懒得改了

$(document).ready(function () {
postContent = UE.getEditor(“content”, {
autoHeightEnabled: false,
initialFrameHeight: KaTeX parse error: Expected '}', got '&' at position 932: ….browser.ie ? '&̲nbsp;' : '<br>'…block[tmpNode.tagName]) {
p.appendChild(tmpNode);
} else {
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
p = UE.uNode.createElement(‘p’);
} else {
node.parentNode.insertBefore(tmpNode, node);
}
}
}
if (p.firstChild()) {
node.parentNode.insertBefore(p, node);
}
node.parentNode.removeChild(node);
},
//KaTeX parse error: Expected '}', got 'EOF' at end of input: … br: {: {}},
ol:{KaTeX parse error: Expected 'EOF', got '}' at position 5: : {}}̲, …: {}},

            dl:function(node){
                node.tagName = 'ul';
                node.setAttr()
            },
            dt:function(node){
                node.tagName = 'li';
                node.setAttr()
            },
            dd:function(node){
                node.tagName = 'li';
                node.setAttr()
            },
            li: function (node) {

                var className = node.getAttr('class');
                if (!className || !/list\-/.test(className)) {
                    node.setAttr()
                }
                var tmpNodes = node.getNodesByTagName('ol ul');
                UE.utils.each(tmpNodes,function(n){
                    node.parentNode.insertAfter(n,node);

                })

            },
            table: function (node) {
                UE.utils.each(node.getNodesByTagName('table'), function (t) {
                    UE.utils.each(t.getNodesByTagName('tr'), function (tr) {
                        var p = UE.uNode.createElement('p'), child, html = [];
                        while (child = tr.firstChild()) {
                            html.push(child.innerHTML());
                            tr.removeChild(child);
                        }
                        p.innerHTML(html.join('&nbsp;&nbsp;'));
                        t.parentNode.insertBefore(p, t);
                    })
                    t.parentNode.removeChild(t)
                });
                var val = node.getAttr('width');
                node.setAttr();
                if (val) {
                    node.setAttr('width', val);
                }
            },
            tbody: {$: {}},
            caption: {$: {}},
            th: {$: {}},
            td: {$: {valign: 1, align: 1,rowspan:1,colspan:1,width:1,height:1}},
            tr: {$: {}},
            h3: {$: {}},
            h2: {$: {}},
            //黑名单,以下标签及其子节点都会被过滤掉
            '-': 'script style meta iframe embed object'
        }
    }(),

    autotypeset: {
        mergeEmptyline: true, //合并空行
        removeClass: true, //去掉冗余的class
        removeEmptyline: false, //去掉空行
        textAlign: "left", //段落的排版方式,可以是 left,right,center,justify 去掉这个属性表示不执行排版
        imageBlockLine: 'center', //图片的浮动方式,独占一行剧中,左右浮动,默认: center,left,right,none 去掉这个属性表示不执行排版
        pasteFilter: true, //根据规则过滤没事粘贴进来的内容
        clearFontSize: true, //去掉所有的内嵌字号,使用编辑器默认的字号
        clearFontFamily: true, //去掉所有的内嵌字体,使用编辑器默认的字体
        removeEmptyNode: false, // 去掉空节点
        //可以去掉的标签
        removeTagNames: {标签名字: 1
        },
        indent: false, // 行首缩进
        indentValue: '2em', //行首缩进的大小
        bdc2sb: false,
        tobdc: false
    }
});

});

参考文章:http://blog.ncmem.com/wordpress/2023/12/28/ueditor-%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e6%97%b6%e8%ae%a9%e5%9b%be%e7%89%87%e5%b1%85%e4%b8%ad/
欢迎入群一起讨论

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值