我想向 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/
如果您还可以指导我如何在单击菜单按钮时打开模式,以便用户可以输入网址,那就太好了。
您需要使用
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/