3

我需要在 trix 编辑器中允许带有类的 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>在编辑器中显示样式。

4

1 回答 1

1

我有同样的需求，最终使用了一个 hack 来解决这个问题：我在 CSS 中重新设置了.trix-content del元素的样式。不过，这仅在您只需要一个自定义样式时才有效。（我可以这样做，因为我不需要删除线格式，所以我可以（ab）使用那个标签。）

为了使它更好，然后每当我需要在除 Trix 编辑器本身之外的任何地方显示文本时，我都会在内容del中用适当的标签替换标签。span class="xxx"也就是说，我在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，我需要扫描文本文件并为用户突出显示某些单词。）

于 2019-11-01T16:02:17.310 回答