如何取消粗体文本？一个小小的 WYSIWYG 编辑器答案

【问题标题】：How to unbold text? A tiny WYSIWYG editor如何取消粗体文本？一个小小的 WYSIWYG 编辑器
【发布时间】：2012-06-28 09:33:46
【问题描述】：

嘿 Stackoverflow 社区，

有一种方法str.bold() 可以将文本包装在 标签中。这非常适合小型 WYSIWYG 编辑器（我知道有些人会说我应该采用数百个开源解决方案中的一个，但这也是出于学习目的）。

问题是如何将文本展开。

这是我的尝试http://jsfiddle.net/Kxmaf/178/

我知道有 editor.execCommand('bold', false, ''); 但这会在每个浏览器上产生不同的 HTML 结果。我只需要、、

非常感谢任何帮助:)

【问题讨论】：

这个帖子有同样的问题，我相信。
stackoverflow.com/questions/9528466/…
该帖子仅提供 jQuery 解决方案...
这对于 spans 和 css 类仍然会更好，添加/删除类比解析给定标签/字符串的文本和添加/删除选定的样式标签要容易得多...跨度>
@Gonçalo Vieira 这是一个有趣的想法 :) 谢谢
对不起，我误解了您的问题。你可以试试正则表达式

标签： javascript editor wysiwyg bold execcommand

【解决方案1】：

按下特定样式按钮时如何使用 javascript 循环选择字符串。您只需将、、...等几个标签保存在一个数组中，然后循环遍历您选择的特定字符串。因此，您甚至可以在找到任何标签时更改样式按钮的样式，以让用户知道刚刚使用了哪种样式。取消选择样式后，再次循环并从字符串中删除标签。

【讨论】：

【解决方案2】：

您需要考虑用户的选择跨越段落的情况。例如（选择边界用管道表示）：

<p>One <b>t|wo</b></p>
<p>Thr|ee</p>

要处理这个问题，您需要将用户选择中的所有文本节点和部分文本节点包裹在 标记中，同时还要检测哪些文本节点已经是粗体并且不理会它们。这很重要，document.execCommand() 会为您处理这一切，大型 WYSIWYG 编辑器也是如此。

大多数浏览器允许在样式模式之间切换，允许您在使用  和  等元素的样式或使用带有样式属性的  元素的样式之间进行选择。您可以使用“StyleWithCSS”命令执行此操作，在旧浏览器中回退到“UseCSS”。以下切换命令以使用非 CSS 版本：

try {
    if (!document.execCommand("StyleWithCSS", false, useCss)) {
        // The value required by UseCSS is the inverse of what you'd expect
        document.execCommand("UseCSS", false, !useCss);
    }
} catch (ex) {
    // IE doesn't recognise these commands and throws.
}

最后，如果您切换到使用 CSS 类而不是  等，您可以使用我的 Rangy 库中的 CSS class applier module。

【讨论】：

没错，但如果我使用document.execCommand()，它的 HTML 结果会有所不同。如何使用样式属性强制标签而不是跨度？
@Aley：您可以在大多数浏览器中使用document.execCommand("StyleWithCSS", false, false)，在旧版浏览器中使用document.execCommand("UseCSS", false, false)。但是，有些浏览器会使用 而不是。
感谢您的出色回答。我已经实施了您的建议，一切正常，但只有一个问题。如果 iframe 最初是隐藏的，则不会应用设置:( 这是jsfiddle.net/Kxmaf/179
@Aley：问题是当 iframe 位于 display: none 的元素内时，您正在写入 iframe。当 iframe 被隐藏并以这种方式显示时，我认为它的某些方面会被重置。这是一个修改后的 jsFiddle：jsfiddle.net/timdown/Kxmaf/208
谢谢蒂姆。问题是我想要应用更改的 iframe 是不可见的，而不是可见的。在您的 JsFiddle 中，它从一开始就已经可见。无论如何都可以使用 StyleWithCSS 吗？我已经在 div 上使用 contentEditable 进行了尝试，效果很好。但是使用 div 我必须修改当前文档，当我想要多个具有不同设置的编辑器时，这很糟糕。