Javascript 应用自定义样式时拆分HTML标记

当您使用所见即所得编辑器，选择文本并应用（例如，粗体）时，浏览器将使用

标记（假设您调用了

document.execCommand（“useCSS”，false）

和/或

document.execCommand（“styleWithCSS”，true）

）。现在，如果您选择其中的一个子集并再次应用粗体，它会将原始粗体标记拆分为如下内容

<span style="font-weight:bold">Something</span>
Not selected 
<span style="font-weight:bold">Selected</span>

什么 未选择 挑选出来的 在我正在开发的一个产品中，我们支持一系列所见即所得功能，包括一些execCommand不直接支持的功能（例如添加一个级别（类）的文本以应用字体系列和字体大小），并且我们遇到了嵌套标记的问题。有没有办法告诉浏览器从样式中删除当前范围，基本上关闭以前的标记，并在内容之后打开新标记

我并没有立即在照片中看到什么

我们已经取得了一些成功，但我不知道我是否缺少一些命令

当你添加多个样式时，这会变得更加复杂，因为在上面的例子中添加了粗体和斜体，然后在中间删除粗体将产生三个跨度，两个带有粗体和斜体文字，中间用斜体字。

---

目前，我们将编辑器的使用限制在Chrome上。

如果您关心的是正确呈现的混乱输出，您应该从与编辑器无关的角度来处理它，因为这会影响所有HTML，尤其是其他WYSIWYG编辑器/用户格式的代码

减少混乱的最快方法是限制用户可用的标记选项：

• 使用大量代码限制（如果不禁用）字体或其他样式/元素
• 请考虑专门为这种困境设计的解决方案，例如BBCode或Markdown语法

如果因为客户端需要MS Word中的红色/蓝色文本而无法交换编辑器，那么就足够了，因为它甚至可以处理MS Office的HTML导出！以下配置了

merge span

的函数应该可以做到这一点

function tidyHTML($input){
    $tidy = new tidy();
    $config = array(
        'ascii-chars' => true,
        'bare' => true,
        'clean' => true,
        'drop-empty-paras' => true,
        'drop-proprietary-attributes' => true,
        'hide-endtags' => true,
        'indent' => true,
        'logical-emphasis' => true,
        'merge-spans' => true,
        'show-body-only' => true,
        'word-2000' => true,
        'wrap' => false
    );
    return $tidy->repairString($input, $config);
}
echo tidyHTML($wysiwyg_output);

---

可以找到选项的文档。

是的，强制用户使用标记将是一个更稳定的解决方案，但使用该应用程序的人对此并不熟悉，因此我们必须为他们提供所见即所得编辑器来创建他们的材料。我计划编写一个模块，在Rangy中实现这一点，并在去年取得了相当大的进展，但实际上，它不太可能在几个月内准备好。您是否尝试过

removeFormat

命令？在这种情况下，这是您唯一可以使用的东西。@skyline3000，如果我们想取消绑定，它就可以工作。然而，一个更复杂的例子是以一段粗体斜体文本为例，将中间部分拆开。这将按照该顺序生成一段粗体斜体、一段纯斜体和一段粗体斜体。不幸的是，删除格式会删除所有内容。过去6个月我一直在使用类似的东西。我也许能帮你，但恐怕我真的不明白你的意思。这不是一个特别有用的答案。这是针对HTML/Javascript而不是PHP的。此外，这并不是关于正确显示的凌乱HTML，而是关于避免以导致无效显示的方式嵌套标记的情况，例如

ABC DEF GHI

，应该是

ABC DEF GHI

，rangy通过在应用level2之前取消选择level1解决了这个特定示例，但是存在更具体的场景。此外，上面的一条评论指出BBCode和Markdown（或者任何一种标记语法）都不适用。对不起。我有点难以理解你到底在问什么，没有看到上面提到的BBCode/Markdown。。。无论如何，这里的侧边栏中有一个问题（）似乎与您的链接解决方案相同：