如何重写Trix HTMLSanitizer以允许使用类的跨度标记

Question

我需要允许在trix编辑器中使用类的span标签。

我可以通过以下方式添加span标记：

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

但是我不能在span上获取类，我想它仍然被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编辑器之外的任何地方显示文本时，我都会在内容中用适当的span class="xxx"替换del标记。也就是说，我在内部使用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标签，那就太好了！

(仅供参考，我需要扫描文本文件并为用户突出显示某些单词。)