Question

我可以使用以下代码在工具栏中添加用于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)
})

我希望能够添加复杂的结构，例如引导网格元素，输入字段，还可能包括轮播。

基本上不只是像<h1>blah</h1>这样的简单标签，而是像<div class="border-bottom p-3">blah</div>这样的类的元素

我希望最终得到的不仅仅是基本的编辑器，还有诸如LayoutIt的生成器之类的东西。

有人可以给我指出正确的方向吗？

使用Bootstrap组件扩展Trix

0 个答案: