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>

在我正在开发的产品中，我们支持一系列WYSIWYG功能，包括一些execCommand不直接支持的功能（比如添加一个级别（类）的文本以应用font-family和font-size ），我们遇到嵌套标签的问题。有没有办法告诉浏览器从样式中删除当前范围并基本上关闭以前的标记并在内容后打开新标记？

我没有立即在execCommand reference中看到一些内容。

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

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

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

Answer 1

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

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

限制（如果不禁用）带有大量代码的字体或其他样式/元素
考虑为这种困境精确设计的解决方案，例如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。

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

1 个答案: