Расширение Trix с помощью компонентов Bootstrap - PullRequest
Новая
       23

Расширение Trix с помощью компонентов Bootstrap

0 голосов
/ 31 мая 2019

Я смог добавить кнопки для заголовков 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.

Может кто-нибудь указать мне правильное направление?

...