当使用删除退格键删除换行符(跳回一行)时,浏览器会在该文本周围插入带有内联样式集的标签.
这真的很令人沮丧,因为它不仅仅是这样做,它还为该span标签添加了一个内联样式,例如,如果我的字体颜色当前是黑色的,那么它会为该span标签添加一个style =“color：black”.
结果是,我无法再使用工具栏编辑该文本的颜色,因为它已经通过内联样式设置为span标签.同样的事情发生在字体大小,如果我做同样的事情备份一行与删除键.
任何人都可以教我一两件关于contenteditable,或建议一种方法来删除跨度,如果这是不可能的,以防止这种浏览器的行为.
**重现此问题**
– 在浏览器中创建一个div,在其上设置内联样式,例如font-size：36px
– 用浏览器编辑内容可编辑div的文本,用手工换行编写几行.
– 现在将光标置于前面/后面的一段文字,然后点击退格键.现在应该在您的光标IN FRONT OF的文本周围生成一个span标签,并且其样式已更改.
更新**
所以我尝试了几个不同的解决方案有限的成功.首先我试图删除所有标签,但是我也失去了所有的线性破解(也许更好的正则表达式可以解决这个问题,我不是regExp写作的专家).
以下所有功能都是首次调用keyup事件,但是我将其附加到取消选择文本框.如何发挥以下功能与问题无关.
//option to remove all tags
var withTags = $(textObject).html();
var withoutTags = withTags.replace(/<(?:.|\n)*?>/gm,'');
$(textObject).html(withoutTags);
我的第二个尝试更成功,通过删除文本框下面的对象的样式标签(divs ans跨越chrome添加的文本框),这里是我的第一个代码
//option to remove style of elements
$(textObject).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from first level element: '+this);
});
然后我意识到每次编辑文本框时,chrome都可能会添加一个新的嵌套级别的div / span标签,以上代码将无法访问,所以我这样做：
//option to remove style of elements
$(textObject).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from first level element: '+this);
//And of course it would be all too easy if chrome added only one level of elements...
$(this).children().each(function() {
$(this).removeAttr('style');
console.log('removing style from second level element: '+this);
});
});
解决方法
所以,我找到为我工作的唯一选择是这样的：
$(document).on("DOMNodeInserted",$.proxy(function (e) {
if (e.target.parentNode.getAttribute("contenteditable") === "true") {
with (e.target.parentNode) {
replaceChild(e.target.firstChild,e.target);
normalize();
}
}
},this));
是的,这有点影响了页面性能,但是它阻止了将表格和内容插入到contenteditable中.
更新：
上述脚本只处理基本情况,当您希望的内容被包裹在一个跨度/ p标签级别时.但是,如果您从Word中复制Word,则可能会复制甚至整个表格.
所以,这里是处理我迄今为止抛出的一切的代码：
$(document).on("DOMNodeInserted",$.proxy(function (e) {
if (e.target.parentNode.getAttribute("contenteditable") === "true") {
var newTextNode = document.createTextNode("");
function antiChrome(node) {
if (node.nodeType == 3) {
newTextNode.nodeValue += node.nodeValue.replace(/(\r\n|\n|\r)/gm,"")
}
else if (node.nodeType == 1 && node.childNodes) {
for (var i = 0; i < node.childNodes.length; ++i) {
antiChrome(node.childNodes[i]);
}
}
}
antiChrome(e.target);
e.target.parentNode.replaceChild(newTextNode,e.target);
}
},this));
此外,您可以随意修改中间的正则表达式,您可以以任何方式删除在您的案例中特别危险的符号.
更新2
经过思考一段时间后,我已经把上面的代码包装成了简单的jQuery插件来简化使用.这是GitHub link
