2

我可以使用以下代码在工具栏中为 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 的构建器这样的东西。

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

4

0 回答 0