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: $(document).height() - 300,
elementPathEnabled: false,
initialFrameWidth: '100%',
autoFloatEnabled: false,
retainOnlyLabelPasted: true,
filterRules: function () {
return{
img:function(node){
console.log(node.getAttr("style"));
node.setAttr('style','display:block;margin:0 auto;');
console.log(node.getAttr("style"));
},
p: function(node){
var listTag;
if(node.getAttr('class') == 'MsoListParagraph'){
listTag = 'MsoListParagraph'
}
node.setAttr();
if(listTag){
node.setAttr('class','MsoListParagraph')
}
if(!node.firstChild()){
node.innerHTML(UE.browser.ie ? ' ' : '<br>')
}
},
div: function (node) {
var tmpNode, p = UE.uNode.createElement('p');
while (tmpNode = node.firstChild()) {
if (tmpNode.type == 'text' || !UE.dom.dtd.$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);
},
//$:{}表示不保留任何属性
br: {$: {}},
ol:{$: {}},
ul: {$: {}},
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(' '));
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/
欢迎入群一起讨论
