How to insert text into Trix editor after menu button is clicked?

Question

I want to add custom button to Trix editor that would allow a user to enter url of video (YouTube, Vimeo) and then new element will be inserted at current cursor position. The video ID would be encrypted.

I managed to add a button but I have troubles to use .insertString()

Trix.config.textAttributes.zzVideo = {
//    style: { color: "red" },
    parser: function(element) {
    
    var tEditor = document.querySelector("trix-editor")
    
    console.log(tEditor)
    console.log(tEditor.editor)
    console.log(element)
    console.log(element.editor)
    
    //tEditor.insertString("Hello")
 //   element.insertString("Hellow")
    
        return //element.style.color === "red"
    },
    inheritable: true
}

https://jsfiddle.net/radek/aL8ochdm/19/

If you also could guide me how to open a modal upon menu button click so user can enter the url it would be great.

Answer 1

to insert a text at cursor position inside trix event handler

addEventListener("trix-initialize", function(event) {
    event.target.editor.insertString("Hello")
}

or insert remotely

window.addEventListener("load",() => {
    const Trix = document.getElementsByTagName('trix-editor')[0];
    Trix.editor.insertString("Hello");
});

if you are going to embed a video it's better to try Trix.Attachment because the HTML inside a content attachment is not subject to Trix’s document conversion rules and will be rendered as-is.

addEventListener("trix-initialize", function(event) {
   const attachment = new Trix.Attachment({ content: "<b>HTML embed content</b>" })
   event.target.editor.insertAttachment(attachment);
});

for opening a modal and bind click event please first read this answer

• add a html button to the toolbar with two attribute data-trix-attribute="FOO" data-trix-action="DOO"

• add a html dialog inside <div class="trix-dialogs" data-trix-dialogs> withinsertAdjacentHTML ( copy the link dialog html code from toolbar.js )

• set these attribute of the dialog same as the button data-trix-dialog="DOO" and data-trix-dialog-attribute="FOO"

• set these attribute of the button located inside dialog that you want to attach event data-trix-action="x-NAME" data-trix-method="setAttribute"

then you can attach event on x-NAME ( x- prefix is mandatory )

document.addEventListener("trix-action-invoke", function(event) {
       if(event.actionName === "x-NAME"){
            // TODO 
            //document.querySelector('.trix-dialogs .trix-dialog--DIALOGNAME .trix-input') access to input value
       
});

the data-trix-method="setAttribute" invoke a method located in toolbar_controller.js, you can try other methods as well. ( like hideDialog or resetDialogInputs )

 setAttribute(dialogElement) {
    const attributeName = getAttributeName(dialogElement)
    const input = getInputForDialog(dialogElement, attributeName)
    if (input.willValidate && !input.checkValidity()) {
      input.setAttribute("data-trix-validate", "")
      input.classList.add("trix-validate")
      return input.focus()
    } else {
      this.delegate?.toolbarDidUpdateAttribute(attributeName, input.value)
      return this.hideDialog()
    }
  }

for better understanding of how Trix works check StimulusJS