Web

百度Ueditor编辑器的Html模式自动替换样式的解决方法


百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然安全的,但是非常不方便。

做一下修改可以去掉这个功能。

一、打开ueditor.all.js

二、搜索到如下代码

'allowDivTransToP' : true
将true改成false(因为为true时会自动把div转换成p)。

三、搜索到如下代码

//进入编辑器的li要套p标签
me.addInputRule(function(root) {
utils.each(root.getNodesByTagName("li"), function(li) { …… });
if (me.options.autoTransWordToList) { …… }
});

将这一整段代码注释掉,这个是自动给li里添加一个p。

四、搜索到如下代码

node.className =
utils.trim(node.className.replace(/list-paddingleft-\w+/, "")) +
" list-paddingleft-" +
type;

将这一整段代码注释掉,这个会自动给ul增加一个内置样式。

五、搜索到如下代码

li.style.cssText && (li.style.cssText = "");

将这一整段代码注释掉,这个会自动去除粘贴到编辑器里的li的style样式

六、搜索到如下代码

//默认的过滤处理
//进入编辑器的内容处理
me.addInputRule(function(root) {
var allowDivTransToP = this.options.allowDivTransToP;
var val;
function tdParent(node) {
while (node && node.type == "element") {
if (node.tagName == "td") {
return true;
}
node = node.parentNode;
}
return false;
}
//进行默认的处理
root.traversal(function(node) {
if (node.type == "element") {
if (
!dtd.$cdata[node.tagName] &&
me.options.autoClearEmptyNode &&
dtd.$inline[node.tagName] &&
!dtd.$empty[node.tagName] &&
(!node.attrs || utils.isEmptyObject(node.attrs))
) {
if (!node.firstChild()) node.parentNode.removeChild(node);
else if (
node.tagName == "span" &&
(!node.attrs || utils.isEmptyObject(node.attrs))
) {
node.parentNode.removeChild(node, true);
}
return;
}
switch (node.tagName) {
case "style":
case "script":
node.setAttr({
cdata_tag: node.tagName,
cdata_data: node.innerHTML() || "",
_ue_custom_node_: "true"
});
node.tagName = "div";
node.innerHTML("");
break;
case "a":
if ((val = node.getAttr("href"))) {
node.setAttr("_href", val);
}
break;
case "img":
//todo base64暂时去掉,后边做远程图片上传后,干掉这个
if ((val = node.getAttr("src"))) {
if (/^data:/.test(val)) {
node.parentNode.removeChild(node);
break;
}
}
node.setAttr("_src", node.getAttr("src"));
break;
case "span":
if (browser.webkit && (val = node.getStyle("white-space"))) {
if (/nowrap|normal/.test(val)) {
node.setStyle("white-space", "");
if (
me.options.autoClearEmptyNode &&
utils.isEmptyObject(node.attrs)
) {
node.parentNode.removeChild(node, true);
}
}
}
val = node.getAttr("id");
if (val && /^_baidu_bookmark_/i.test(val)) {
node.parentNode.removeChild(node);
}
break;
case "p":
if ((val = node.getAttr("align"))) {
node.setAttr("align");
node.setStyle("text-align", val);
}
//p标签不允许嵌套
utils.each(node.children, function(n) {
if (n.type == "element" && n.tagName == "p") {
var next = n.nextSibling();
node.parentNode.insertAfter(n, node);
var last = n;
while (next) {
var tmp = next.nextSibling();
node.parentNode.insertAfter(next, last);
last = next;
next = tmp;
}
return false;
}
});
if (!node.firstChild()) {
node.innerHTML(browser.ie ? " " : "
"
);
}
break;
case "div":
if (node.getAttr("cdata_tag")) {
break;
}
//针对代码这里不处理插入代码的div
val = node.getAttr("class");
if (val && /^line number\d+/.test(val)) {
break;
}
if (!allowDivTransToP) {
break;
}
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);
break;
case "dl":
node.tagName = "ul";
break;
case "dt":
case "dd":
node.tagName = "li";
break;
case "li":
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);
});
break;
case "td":
case "th":
case "caption":
if (!node.children || !node.children.length) {
node.appendChild(
browser.ie11below
? UE.uNode.createText(" ")
: UE.uNode.createElement("br")
);
}
break;
case "table":
if (me.options.disabledTableInTable && tdParent(node)) {
node.parentNode.insertBefore(
UE.uNode.createText(node.innerText()),
node
);
node.parentNode.removeChild(node);
}
}
}
});
});


//从编辑器出去的内容处理
me.addOutputRule(function(root) {
var val;
root.traversal(function(node) {
if (node.type == "element") {
if (
me.options.autoClearEmptyNode &&
dtd.$inline[node.tagName] &&
!dtd.$empty[node.tagName] &&
(!node.attrs || utils.isEmptyObject(node.attrs))
) {
if (!node.firstChild()) node.parentNode.removeChild(node);
else if (
node.tagName == "span" &&
(!node.attrs || utils.isEmptyObject(node.attrs))
) {
node.parentNode.removeChild(node, true);
}
return;
}
switch (node.tagName) {
case "div":
if ((val = node.getAttr("cdata_tag"))) {
node.tagName = val;
node.appendChild(UE.uNode.createText(node.getAttr("cdata_data")));
node.setAttr({
cdata_tag: "",
cdata_data: "",
_ue_custom_node_: ""
});
}
break;
case "a":
if ((val = node.getAttr("_href"))) {
node.setAttr({
href: utils.html(val),
_href: ""
});
}
break;
break;
case "span":
val = node.getAttr("id");
if (val && /^_baidu_bookmark_/i.test(val)) {
node.parentNode.removeChild(node);
}
//将color的rgb格式转换为#16进制格式
if (me.getOpt("rgb2Hex")) {
var cssStyle = node.getAttr("style");
if (cssStyle) {
node.setAttr(
"style",
cssStyle.replace(/rgba?\(([\d,\s]+)\)/g, function(a, value) {
var array = value.split(",");
if (array.length > 3) return "";
value = "#";
for (var i = 0, color; (color = array[i++]); ) {
color = parseInt(
color.replace(/[^\d]/gi, ""),
10
).toString(16);
value += color.length == 1 ? "0" + color : color;
}
return value.toUpperCase();
})
);
}
}
break;
case "img":
if ((val = node.getAttr("_src"))) {
node.setAttr({
src: node.getAttr("_src"),
_src: ""
});
}
}
}
});
});
};

将其中的case部分全部注释掉,这个会过滤部分标签

发表评论