javascript - execCommand 的替代方案 ('underline' );

Question

好吧，有些人会明白我的意思并编辑我的问题，但他们做错了。

更好的解释:

您有一个 contenteditable div与文本 This is a Test String. .如果您现在使用 execCommand('underline')在 Test String你得到 This is a <u>Test String</u>如果你现在使用 execCommand('strikethrough')在 is a Test你得到 This <s>is a <u>Test</u></s><u>String</u> , 这是正确的。

所以，在 HTML5 中 <u>和 <s>已经过时了。对于第一个execCommand你可以使用 surroundContents()用<span style="text-decoration:underline;"> .如果您现在使用 surroundContets()第二个execCommand你收到 BAD_BOUNDARYPOINTS_ERR .

我想要的是一个函数，它的工作方式类似于 execCommand在这种情况下，但是我可以使用女巫 HTML-Tag 定义函数，字符串将被包装……(如果有任何重叠，它应该是智能的……)

Answer 1

surroundContents()会有问题:如果选择包含多个 block 元素，例如<div> s 或 <p> s，包围的内容将被放置在一个新的 block 中，将其从原来的位置中分离出来。为了克服这个问题，您可以在此处轻松调整我的答案:apply style to range of text with javascript in uiwebview

您需要执行以下操作:

• 使用规则“text-decoration: underline;”创建一个 CSS 类
• 添加 intersectsNode Range的方法|对于没有它的浏览器，例如 Firefox(参见 MDC 的示例:https://developer.mozilla.org/en/DOM/range.intersectsNode)
• 如果您关心 IE，则需要编写一个完全不同的解决方案。