如何取消粗体文本?一个小小的所见即所得的编辑器

How to unbold text? A tiny WYSIWYG editor

本文关键字：小小的 一个 所见即所得 编辑器 文本 何取消 取消      更新时间：2023-09-26

Hey Stackoverflow community，

有一种方法str.bold()将文本包装在<b></b>标签中。这对于一个小小的所见即所得的编辑器来说是完美的（我知道有些人会说我应该采用数百个开源解决方案之一，但这也是为了学习目的）。

问题是如何取消加粗文本。

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

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

任何帮助都非常感谢:)

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

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

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

要处理此问题，您需要将用户选择中的所有文本节点和部分文本节点包装在<b>标签中，同时检测哪些文本节点已经加粗并保留它们。这并非易事，document.execCommand()为您处理这一切，所见即所得的大型编辑器也是如此。

大多数浏览器允许在样式模式之间切换，允许您选择使用 <b> 和 <i> 等元素进行样式设置，或使用具有样式属性的<span>元素进行样式设置。您可以使用"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 类而不是<b>等，你可以使用我的 Rangy 库的 CSS 类应用器模块。

相关文章：