Ruby on rails 使用引导组件扩展Trix

我能够使用以下代码在工具栏中为h1/h2标题添加按钮：

Trix.config.textAttributes.h1 = { tagName: "h1", inheritable: true }
Trix.config.textAttributes.h2 = { tagName: "h2", inheritable: true }

addEventListener("trix-initialize", function(event) {
    var element = event.target
  var editor = element.editor
  var toolbarElement = element.toolbarElement
  var groupElement = toolbarElement.querySelector(".button_group.text_tools")

  groupElement.insertAdjacentHTML("beforeend", '<button type="button" data-trix-attribute="h1">h1</button>')
  groupElement.insertAdjacentHTML("beforeend",'<button type="button" data-trix-attribute="h2">h2</button>')

  var selectedAttributes = new Set
  function updateSelectedAttributes() {
    selectedAttributes = new Set

    var selectedRange = editor.getSelectedRange()
    if (selectedRange[0] === selectedRange[1]) { selectedRange[1]++ }

    var selectedPieces = editor.getDocument().getDocumentAtRange(selectedRange).getPieces()
    selectedPieces.forEach(function(piece) {
        Object.keys(piece.getAttributes()).forEach(function(attribute) {
        selectedAttributes.add(attribute)
      })
    })
  }

  function enforceExclusiveAttributes() {
    if (editor.attributeIsActive("h1") && selectedAttributes.has("h2")) {
        editor.deactivateAttribute("h2")
      updateSelectedAttributes()
    } else if (editor.attributeIsActive("h1") && selectedAttributes.has("h1")) {
        editor.deactivateAttribute("h1")
      updateSelectedAttributes()
    }
  }

    updateSelectedAttributes()
  element.addEventListener("trix-selection-change", updateSelectedAttributes) 
  element.addEventListener("trix-change", enforceExclusiveAttributes)
})

Trix.config.texttributes.h1={标记名：“h1”，可继承：true}
Trix.config.texttributes.h2={标记名：“h2”，可继承：true}
addEventListener（“trix初始化”，函数（事件）{
var元素=event.target
var editor=element.editor
var toolbarElement=element.toolbarElement
var groupElement=toolbarElement.querySelector（“.button\u group.text\u tools”）
insertAdjacentHTML（“beforeend”，“h1”）
insertAdjacentHTML（“beforeend”，“h2”）
var selectedAttributes=新集合
函数updateSelectedAttribute（）{
SelectedAttribute=新集合
var selectedRange=editor.getSelectedRange（）
如果（selectedRange[0]==selectedRange[1]）{selectedRange[1]+}
var selectedPieces=editor.getDocument（）.getDocumentTrange（selectedRange）.getPieces（）
所选工件。forEach（函数（工件）{
Object.keys（piece.getAttributes（））.forEach（函数（属性）{
SelectedAttribute.add（属性）
})
})
}
函数强制执行ExclusiveAttributes（）{
if（editor.attributeIsActive（“h1”）&selectedAttributes.has（“h2”））{
编者：停用属性（“h2”）
UpdateSelectedAttribute（）
}else if（editor.attributeIsActive（“h1”）&selectedAttributes.has（“h1”））{
编者：停用属性（“h1”）
UpdateSelectedAttribute（）
}
}
UpdateSelectedAttribute（）
元素。addEventListener（“trix选择更改”，更新选定属性）
元素。addEventListener（“trix变更”，强制执行排他性属性）
})

我希望能够添加复杂的结构，如引导网格元素、输入字段，可能还有旋转木马

基本上，不仅仅是像

blah

这样的简单标记，而是像

blah

我希望最终得到的不仅仅是一个基本的编辑器，更像是Layoutt的builder

有人能告诉我正确的方向吗