松鼠的博客

需求
今天碰到個需求，客戶要求在把微信公眾號中的文章粘貼到富文本框時將文字向左對齊，圖片居中
作為一個已經(jīng)幾年沒碰前端的我來說有點(diǎn)頭大，百度google了一番未果，只好自己研究去了
花了2個多小時終于搞定

話不多說，直接上代碼
主要是 retainOnlyLabelPasted 和 filterRules
retainOnlyLabelPasted 會刪掉所有亂七八糟的格式
filterRules 配置很多標(biāo)簽粘貼時的過濾規(guī)則，其中我配置了

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

主要是重置一下style
其他的啥也沒改
至于這個node怎么用可以去下面的API鏈接看

然后其他的配置都是官網(wǎng)默認(rèn)的的

還有一個autotypeset 不知道做什么用的
設(shè)置的那些東西似乎沒有生效
不過既然寫好了就懶得改了

$(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 ? '&nbsp;' : '<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('&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: {$: {}},
//黑名單，以下標(biāo)簽及其子節(jié)點(diǎn)都會被過濾掉
'-': 'script style meta iframe embed object'
}
}(),

autotypeset: {
mergeEmptyline: true, //合并空行
removeClass: true, //去掉冗余的class
removeEmptyline: false, //去掉空行
textAlign: "left", //段落的排版方式，可以是 left，right，center，justify 去掉這個屬性表示不執(zhí)行排版
imageBlockLine: 'center', //圖片的浮動方式，獨(dú)占一行劇中，左右浮動，默認(rèn): center，left，right，none 去掉這個屬性表示不執(zhí)行排版
pasteFilter: true, //根據(jù)規(guī)則過濾沒事粘貼進(jìn)來的內(nèi)容
clearFontSize: true, //去掉所有的內(nèi)嵌字號，使用編輯器默認(rèn)的字號
clearFontFamily: true, //去掉所有的內(nèi)嵌字體，使用編輯器默認(rèn)的字體
removeEmptyNode: false, // 去掉空節(jié)點(diǎn)
//可以去掉的標(biāo)簽
removeTagNames: {標(biāo)簽名字: 1
},
indent: false, // 行首縮進(jìn)
indentValue: '2em', //行首縮進(jìn)的大小
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/

歡迎入群一起討論