单击菜单按钮后如何将文本插入 Trix 编辑器？

Question

我想向 Trix 编辑器添加自定义按钮，允许用户输入视频的 url（YouTube、Vimeo），然后新元素将插入到当前光标位置。视频 ID 将被加密。

我设法添加了一个按钮，但使用 .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/

如果您还可以指导我如何在单击菜单按钮时打开模式，以便用户可以输入网址，那就太好了。

Answer 1

您需要使用

tEditor2.editor.insertString("Hello");

来插入纯文本。

这是一个工作示例：

addEventListener("trix-initialize", function(event) {
    
    var videoButtonHTML = '<button id="myVideoButton" type="button" data-trix-attribute="zzVideo">VideO</button>';
    
    event.target.toolbarElement.
    querySelector(".trix-button-group").
    insertAdjacentHTML("beforeend", videoButtonHTML)
    
    document.querySelector("#myVideoButton").addEventListener("click", (e) => {
        // open modal here
        var tEditor2 = document.querySelector("trix-editor");
        tEditor2.editor.insertString("Hello");

    })
})

我使用 bootstrap 创建模态框，这些模态框可以从单击事件侦听器中打开。 https://getbootstrap.com/docs/5.3/components/modal/