如何克隆Trix编辑器默认链接按钮实现YouTube视频嵌入？

1. 添加自定义工具栏按钮 #

先在Trix的工具栏中插入YouTube嵌入按钮，并绑定点击事件触发输入模态框：

// 监听Trix初始化事件
document.addEventListener("trix-initialize", function(event) {
  const toolbarElement = event.target.toolbarElement;
  // 构建YouTube按钮的HTML结构
  const youtubeButtonHTML = `
    <button type="button" class="trix-button" data-trix-action="insert-youtube" title="插入YouTube视频">
      YouTube
    </button>
  `;
  // 将按钮插入到链接按钮所在的工具栏组中
  toolbarElement.querySelector(".trix-button-group--links").insertAdjacentHTML("beforeend", youtubeButtonHTML);

  // 给按钮绑定点击事件
  toolbarElement.querySelector('[data-trix-action="insert-youtube"]').addEventListener("click", openYoutubeModal);
});

2. 创建输入模态框 #

模仿Trix默认链接模态框的交互逻辑，创建一个用于输入YouTube链接的模态框：

<!-- 模态框容器，可放在页面任意位置 -->
<div id="youtube-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1000;">
  <label>YouTube视频链接</label>
  <input type="text" id="youtube-url" placeholder="输入YouTube视频链接">
  <div style="margin-top: 10px;">
    <button id="confirm-youtube">插入</button>
    <button id="cancel-youtube">取消</button>
  </div>
</div>
<!-- 模态框遮罩层 -->
<div id="youtube-modal-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;"></div>

然后编写模态框的显示/隐藏逻辑：

function openYoutubeModal() {
  document.getElementById("youtube-modal").style.display = "block";
  document.getElementById("youtube-modal-overlay").style.display = "block";
  document.getElementById("youtube-url").focus();
  
  // 绑定确认、取消按钮的事件
  document.getElementById("confirm-youtube").addEventListener("click", insertYoutubeEmbed);
  document.getElementById("cancel-youtube").addEventListener("click", closeYoutubeModal);
}

function closeYoutubeModal() {
  document.getElementById("youtube-modal").style.display = "none";
  document.getElementById("youtube-modal-overlay").style.display = "none";
  // 清空输入框内容
  document.getElementById("youtube-url").value = "";
}

3. 实现链接验证与嵌入逻辑 #

验证输入的YouTube链接格式，插入带自定义属性的不可编辑内容：

function insertYoutubeEmbed() {
  const urlInput = document.getElementById("youtube-url");
  const youtubeUrl = urlInput.value.trim();
  
  // 简单验证YouTube链接格式
  const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/;
  if (!youtubeRegex.test(youtubeUrl)) {
    alert("请输入有效的YouTube链接");
    return;
  }

  // 获取当前Trix编辑器实例
  const editor = document.querySelector("trix-editor").editor;
  
  // 创建带自定义属性的元素，标记YouTube链接
  const youtubeElement = document.createElement("span");
  youtubeElement.setAttribute("data-youtube", youtubeUrl);
  youtubeElement.textContent = `YouTube视频：${youtubeUrl.split("/").pop()}`;
  // 设置为不可编辑
  youtubeElement.setAttribute("contenteditable", "false");
  // 可自定义样式，匹配Trix默认链接风格
  youtubeElement.style.color = "#0066cc";
  youtubeElement.style.cursor = "pointer";

  // 将元素插入编辑器
  editor.insertHTML(youtubeElement.outerHTML);
  
  // 关闭模态框
  closeYoutubeModal();
}

4. 移除默认取消链接按钮（可选） #

如果不需要取消链接功能，可在初始化时移除对应按钮：

document.addEventListener("trix-initialize", function(event) {
  const toolbarElement = event.target.toolbarElement;
  const unlinkButton = toolbarElement.querySelector('[data-trix-action="removeLink"]');
  if (unlinkButton) unlinkButton.remove();
});

补充说明 #

如果需要在前端渲染YouTube视频，可以监听Trix的trix-change事件，读取元素的data-youtube属性，将其替换为<iframe>标签实现视频播放。

内容的提问来源于stack exchange，提问作者Radek