如何隐藏TinyMCE链接插件中的Target设置区域

嘿，我之前也遇到过TinyMCE链接插件这个Target区域的问题，官方文档确实没直接给出隐藏配置，不过有几个实用的方法可以解决，给你分享下：

方案1：利用OpenWindow事件动态隐藏Target区域 #

TinyMCE会在打开对话框时触发OpenWindow事件，我们可以借此机会定位到Target相关的DOM元素并隐藏它，同时配置默认链接目标为_blank做双重保障：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'link',
  toolbar: 'link',
  default_link_target: '_blank', // 强制默认打开方式为新标签页
  setup: function(editor) {
    editor.on('OpenWindow', function(e) {
      // 确认当前打开的是链接对话框（适配不同语言的标题，比如英文是"Insert link"）
      const dialogTitle = e.target.settings.title;
      if (dialogTitle === 'Insert link' || dialogTitle === 'Edit link') {
        // 通过标签文本定位Target对应的容器
        const targetLabel = e.target.getEl().querySelector('label:contains("Target")');
        if (targetLabel) {
          // 找到Target区域的父容器并隐藏
          const targetContainer = targetLabel.closest('.tox-form__group');
          if (targetContainer) {
            targetContainer.style.display = 'none';
          }
        }
      }
    });
  }
});

方案2：自定义链接对话框（最稳定可控） #

如果动态定位DOM的方式不够稳定，你可以完全自定义链接对话框的内容，直接去掉Target相关选项，从根源上避免问题：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'link',
  toolbar: 'link',
  default_link_target: '_blank',
  link_dialog: function (editor, url, text, link) {
    editor.windowManager.open({
      title: link ? 'Edit link' : 'Insert link',
      body: {
        type: 'panel',
        items: [
          { type: 'input', name: 'url', label: 'URL', value: url || '' },
          { type: 'input', name: 'text', label: 'Text to display', value: text || '' },
          // 可以保留一个"在新标签页打开"的复选框，默认勾选
          { type: 'checkbox', name: 'open_new', label: 'Open in new tab', checked: true }
        ]
      },
      buttons: [
        { type: 'cancel', text: 'Cancel' },
        { type: 'submit', text: 'Save', primary: true }
      ],
      onSubmit: function (api) {
        const data = api.getData();
        // 构建链接属性，强制设置target为_blank
        const linkAttrs = {
          href: data.url,
          target: '_blank',
          rel: 'noopener noreferrer' // 安全添加noopener属性，防止钓鱼风险
        };
        // 插入链接到编辑器
        const linkHtml = `<a ${Object.entries(linkAttrs).map(([key, val]) => `${key}="${val}"`).join(' ')}>${data.text || data.url}</a>`;
        editor.insertContent(linkHtml);
        api.close();
      }
    });
  }
});

方案3：用MutationObserver监听DOM变化 #

如果上面两种方法都不适用，可以用MutationObserver监听DOM树的变化，当链接对话框的动态元素生成后，自动隐藏Target区域：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'link',
  toolbar: 'link',
  default_link_target: '_blank',
  setup: function(editor) {
    editor.on('init', function() {
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          // 遍历所有新增的DOM节点，查找链接对话框中的Target区域
          const targetGroups = document.querySelectorAll('.tox-dialog__body .tox-form__group');
          targetGroups.forEach(group => {
            const label = group.querySelector('label');
            if (label && label.textContent.includes('Target')) {
              group.style.display = 'none';
              // 找到目标元素后断开观察者，避免不必要的监听
              observer.disconnect();
            }
          });
        });
      });
      // 配置观察者，监听整个文档的子节点变化
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    });
  }
});

个人最推荐方案1，它既简单又能满足需求，配合default_link_target的配置，完全不用担心用户误选Target为none的问题。如果需要更定制化的对话框体验，方案2会是更好的选择。

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