javascript - 如何覆盖 Trix HTMLSanitizer 以允许带有 class 的 span 标签

Question

我需要在 trix 编辑器中允许带有类的 span 标记。

我可以通过添加span标签来实现

 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true
 };

但是我无法在跨度上获取类，我猜它仍然被 Trix.HTMLSanitizer 剥离。

我也尝试过

 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true,
        parser: false
 };

//and


 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true,
        parser: (element) => {
         element.allowedAttributes = 'class';
        }
 };

无法弄清楚如何覆盖 Trix.HTMLSanitizer 以允许类似 <span class="my-class">value</span> 的内容在编辑器中显示样式。

Answer 1

我有同样的需求，最终使用 hack 来解决这个问题:我重新设计了 CSS 中的 .trix-content del 元素。不过，这只适用于您只需要单一自定义样式的情况。 (我可以这样做，因为我不需要删除线格式，所以我可以(ab)使用该标签。)

为了使其更好，每当我需要在除在 Trix 编辑器本身中。也就是说，我在内部使用 del 来标记、存储和编辑/更新内容，并将其替换为适当的 span 以在编辑器外部向用户显示。

在创建富文本内容时，将其标记为突出显示:

def create
  ...
  object_params[:content].gsub!(/foo/i, '<del>\0</del>')
  ...
end

然后，当加载它以在编辑器外部显示时:

@new_content = @object.content.to_s.gsub(/<del>/i, '<span class="highlight">').gsub(/<\/del>/i, '</span>').html_safe

还有 SCSS:

// Trix-editor

.trix-content {
  del {
    background-color: $yellow;
    text-decoration: none;
  }
}

.highlight {
  background-color: $yellow;
}

这可能无法满足您的需要，并且无论如何都有点令人讨厌。如果 Trix 能够支持任意 span 标签，那就太好了!

(FWIW，我的需要是扫描文本文件并为用户突出显示某些单词。)