javascript - 如何覆盖 Trix HTMLSanitizer 以允许带有类的 span 标签
问题描述
我需要在 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>
在编辑器中显示样式。
解决方案
我有同样的需求,最终使用了一个 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,我需要扫描文本文件并为用户突出显示某些单词。)
推荐阅读
- linux - 为什么 awk 模式匹配不返回结果?
- ruby-on-rails - 接口#index 中的 ActionController::UrlGenerationError
- javascript - 如何为每个用户存储一个号码
- python - 如何在张量流中提取图像精确坐标的向量?
- python - Python中Tkinter中的滚动条仅在悬停时有效
- java-websocket - Tomcat 9 上的 Java Web Socket - 一些问题
- delphi - 如何同时拥有 Tooltip 和 Hint 提示模式?
- html - 我需要将右侧的 2 行(2018 年和 2017 年)分开,以便有一些空格。有很多麻烦
- javascript - 重定向到 Page.aspx 重定向到未定义
- azure - 如何使我的仪表板小部件呈现为条形图而不是表格 - Azure 仪表板