3

当您使用 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 不直接支持的功能（例如添加文本级别（类）以同时应用字体系列和字体大小），以及我们遇到了嵌套标签的问题。有没有办法告诉浏览器从样式中删除当前范围并基本上关闭以前的标签并在内容之后打开新标签？

我没有立即在execCommand 参考中看到任何内容。

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

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

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

4

1 回答 1

0

如果您关心的是正确呈现的混乱输出，您应该从与编辑器无关的角度来处理它，因为这会影响所有 HTML ，但尤其是范围很广和其他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);

可以在此处找到选项的文档。

于 2013-01-04T15:12:28.610 回答