将按钮添加到Rails ActionText工具栏

Question

配置ActionText以便向工具栏添加按钮的最佳方法是什么。例如，一个h2和h3按钮？

Answer 1

要添加到Will的答案中，您可以避免在初始化回调后使用trix来重新创建整个工具栏：

示例，添加一个“红色”按钮，将文本变为红色：

var Trix = require("trix");

/* what the newly created button does */
Trix.config.textAttributes.red = {
    style: { color: "red" },
    parser: function(element) {
        return element.style.color === "red"
    },
    inheritable: true
}

/* insert the button visual in the default toolbar */
addEventListener("trix-initialize", function(event) {
    var buttonHTML = '<button type="button" data-trix-attribute="red">RED</button>'

    event.target.toolbarElement.
    querySelector(".trix-button-group").
    insertAdjacentHTML("beforeend", buttonHTML)
})

输出：

Answer 2

我找不到有关执行此操作的“正确”方法的任何文档，但是可以进行以下工作：

我已经对/app/javascript/application.js文件进行了这些修改，其中ActiveText在其中放置了trix和actiontext的require语句。

首先，我通过将require返回到变量中来获得Trix实例。

  if var tabs = self.tabBarController?.viewControllers {
            tabs.remove(at: indexToRemove)
            self.tabBarController?.viewControllers = tabs
        } else {
            print("There is something wrong with tabbar 
  controller")
        }

然后，我指定我希望Trix识别的其他项目：

var Trix  = require("trix")
console.log("Config", Trix.config);

然后我通过仅粘贴Trix的代码并修改html来重建工具栏，这很冗长，但易于理解：

Trix.config.blockAttributes.heading2 = {
  tagName: 'h2'
}
Trix.config.blockAttributes.heading3 = {
  tagName: 'h3'
}
Trix.config.textAttributes.underline = {
  tagName: 'u'
}

这是从https://github.com/basecamp/trix/blob/master/src/trix/config/toolbar.coffee中提取（并确定）的