使用 ActionText Trix 编辑器插入样式超链接

如何解决使用 ActionText Trix 编辑器插入样式超链接

问题

使用 Rails 6.1.0 ActionText，如何修改 Trix 编辑器工具栏以插入带有超链接的可点击样式按钮/锚点？

1. 文本和超链接都可由用户编辑
2. 行为和显示为一个块；不会在按钮内添加假换行符
3. 整个元素在显示时可点击（不仅是其内部文本），但在编辑时不可点击
4. 在编辑和显示时以正确的样式呈现
5. 样式和链接都是以原子方式应用的（避免期望用户发现他们必须点击多个工具栏按钮；避免创建没有链接到任何地方的样式按钮）

尝试的解决方案

// Javascript

import Trix from "trix";

Trix.config.blockAttributes.button = { tagName: "x-button" };

// HACK: 'mute' the inner anchor tag and make the parent x-button handle the click instead
Trix.registerElement("x-button",{
  initialize: function() {
    const anchors = this.getElementsByTagName("a");
    if (anchors.length > 0) {
      this.onclick = () => window.location = anchors[0].href;
    }
  }
});

document.addEventListener("trix-initialize",function(event) {
  var buttonHTML = "<button type=\"button\" class=\"trix-button\" data-trix-attribute=\"button\" title=\"Button\">Button</button>";
  var groupElement = event.target.toolbarElement.querySelector(".trix-button-group--text-tools");
  groupElement.insertAdjacentHTML("beforeend",buttonHTML);
});

// CSS,not for 'design' but for demonstration purposes only!

x-button {
  display: block;
  background-color: red;
  width: max-content;
  padding: 1rem !important;
  cursor: pointer;
  a {
    pointer-events: none;
  }
}

# config/initializers/action_text.rb
Rails.application.config.after_initialize do
  ActionText::ContentHelper.allowed_tags << 'x-button'
end

什么有效

通过上述方法，可以通过使用新注册的“按钮”工具栏按钮和预先存在的“链接”按钮来设置样式和链接：

内容在数据库中存储如下：

<div>some content...</div><x-button><a href="https://example.com">my button</a></x-button><div>more content...</div>

按钮样式在显示时也能正常显示（见顶部截图）。

什么不起作用

• 即使用户实际上想要编辑按钮，单击该按钮也会导航到其 URL。作为解决方法，需要使用键盘修改/选择按钮的文本。 (#3)
• 用户需要记住首先单击“按钮”按钮，然后键入按钮的文本，然后选择它，然后单击“链接”按钮，最后在对话框中添加 URL (#5)