javascript - 应用自定义样式时拆分 HTML 标签

Question

当您使用 WYSIWYG 编辑器时，您选择文本并应用(例如，加粗)，浏览器将使用 <span style="font-weight:bold"> 将所选内容换行。标记(假设您调用了 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 不直接支持的功能(例如添加文本级别(类)以同时应用字体系列和字体大小)，我们遇到了嵌套标签的问题。有没有办法告诉浏览器从样式中删除当前范围并基本上关闭以前的标签并在内容之后打开新标签？

我没有立即在 execCommand reference 中看到任何内容.

我们正在使用 rangy 1.2.3取得了一些成功，但我不知道是否缺少某些命令。

当您添加多种样式时，这会变得更加复杂，因为在上面的示例中添加了粗体和斜体，然后在中间移除粗体将产生三个跨度，两个具有粗体和斜体文本，而中间只有斜体。

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

Answer 1

如果您担心正确呈现的困惑输出，您应该从与编辑器无关的 Angular 来处理它，因为这会影响所有 HTML，尤其是 rangy和其他所见即所得编辑器/用户格式化的代码。

减少困惑的最快方法是限制用户可用的标记选项:

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

如果因为客户需要来自 MS Word 的红色/蓝色文本而无法更换编辑器，PHP Tidy应该足够了，因为它甚至可以处理 MS Office 的 HTML 导出!以下配置了 merge-spans 的函数应该可以解决问题。

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);

可以找到选项的文档 here .