防止可编辑模式创建< span>标签 [英] prevent contenteditable mode from creating <span> tags
问题描述
当我在div上使用浏览器contenteditable = true时，为了让用户更新其中的文本，我遇到了这个问题（使用Chrome）：
When I use the browser contenteditable=true on a div in order to let the user update the text in it, I run into this problem (using Chrome):
当使用 delete 退格键删除换行符（向上跳回一行）时，浏览器会在该文本周围插入带有内置样式集的标记。
When using the delete backspace key to remove a line break (jump back up a line) the browser inserts a tag with inline style set, around that text.
这真的很令人沮丧，因为它不仅如此，它还为span标签添加了一个内联样式，例如如果我的字体颜色当前是黑色的， a style =color：black到该span标记。
This is really frustrating because not only does it do that, it also adds an inline style to that span tag, for example if my font color is currently black, it adds a style="color:black" to that span tag.
结果是，我无法再使用工具栏编辑该文本的颜色，因为它已通过内联样式设置为span标记。同样的事情发生在字体大小，如果我做同样的事情用删除键备份一行。
The result is that I can no longer edit the color of that text with my toolbar, since it has been set hard to the span tag by the inline style. Same thing happens with font size if I do this same thing backing up a line with the delete key.
任何人在这里可以教我一两件关于contenteditable，建议一种方法来删除跨度：s，如果不能阻止此浏览器行为。
Anyone here that could teach me a thing or two about contenteditable, or suggest a way to remove the span:s, if it isnät possible to prevent this browser behaviour..
**重现此问题**
- 创建在浏览器中的div，在其上设置内联样式例如font-size：36px
- 编辑div的文本，内容在浏览器中可编辑，写几行与手动换行。
- 现在将光标放在文本的一个段落之前/之前，并击退退格。
** To reproduce this problem ** - Create a div in the browser, set inline style on it with for instance font-size:36px - Edit the div's text with content editable in the browser, write a couple of lines with manual linebreaks. - Now put cursor IN FRONT OF / BEFORE a paragraph of text and hit backspace. A span tag should now be generated around the text that is IN FRONT OF your cursor, and the style of it changed.
UPDATE * *
所以我尝试了几种不同的解决方案，但成效有限。首先我试图删除所有的标签，但后来我失去了所有的linebreaks（也许一个更好的regexp可以解决这个问题，我不是regExp写作的专家）。
UPDATE ** So I have tried a few different solutions with limited success. First I tried to remove all tags, but then I lost all linebreaks as well (maybe a better regexp could solve this, I am no expert on regExp writing).
下面的函数首先被调用keyup事件，但是然后我附加他们取消选择文本框。
All functions below were first called upon keyup event, but then I attached them to unselecting the textbox. How to fire below functions is irrelevant to the question.
//option to remove all tags
var withTags = $(textObject).html();
var withoutTags = withTags.replace(/<(?:.|\n)*?>/gm, '');
$(textObject).html(withoutTags);
我的第二次尝试是更成功的，通过删除文本框下面的对象的样式标签在chrome添加的文本框内），这里是我的第一个代码
My second attempt was more successful, by removing style tags of objects underneath the textbox (the divs ans spans inside the textbox that chrome added), here was my first code
//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标签，上面的代码不会到达，所以我这样做：
Then I realized that every time I edit a textbox, chrome might add a new nested level of div/span tags that the above code won't reach, so I did this:
//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);
});
});
但这还不够，因为嵌套的数量在理论上可以是无限的。仍在研究一个更好的解决方案。任何输入是赞赏=）
But that isn't enough since the amount of nesting could theoretically be unlimited. Still working on a better solution. Any input is appreciated =)
推荐答案
这里是我解决这个
jquery remove< span>标签，同时保留其内容（并用< br>替换< divs>和< p>：s）
div，span和p标签，删除这些标签，并用br替换所有div和p。我做的是模糊，最佳是做每个键下降，但这是吃太多的CPU，因为我必须循环所有这些％＃¤¤％& （你说它）嵌套的元素。
I preserve the text of all div, span and p tags, remove those tags, and substitute all div and p with a br. I do it on blur, optimal would be to do it on every keydown, but that is eating too much cpu since I have to loop through all these %#¤¤%& (you said it) nested elements.
这篇关于防止可编辑模式创建< span>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
