Question

Hey Stackoverflow社区，

有一个方法str.bold()可以在标记中包装文本。这对于一个小小的WYSIWYG编辑器来说是完美的（我知道有些人会说我应该采用一个hundrets开源解决方案，但这也是出于学习目的）。

问题是如何解开文本。

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

非常感谢任何帮助：）

Answer 1

当按下特定的样式按钮时，用javascript循环选定的字符串怎么样？你可以在数组中保存像，，....这样的几个标签，然后循环遍历你选择的特定字符串。因此，您甚至可以在找到任何标签时更改样式按钮的样式，以便让用户知道刚使用的样式。取消选择样式后，再次循环并从字符串中删除标记。

Answer 2

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

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

要处理此问题，您需要在标记中包装用户选择内的所有文本节点和部分文本节点，同时还要检测哪些文本节点已经是粗体并且不管它们。这是非常重要的，document.execCommand()为您处理这一切，与所见即所得的大型编辑一样。

大多数浏览器允许在样式模式之间切换，允许您在使用和等元素进行样式设置或使用带有样式属性的元素样式进行选择。您可以使用“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类而不是等，则可以使用我的CSS class applier module库的Rangy。

如何解开文字？一个小小的WYSIWYG编辑器

2 个答案: