TinyMCE 5.2。如何在插件中引用对话框元素答案

【问题标题】：TinyMCE 5.2. How to reference dialog elements in a pluginTinyMCE 5.2。如何在插件中引用对话框元素
【发布时间】：2020-06-19 16:39:27
【问题描述】：

我正在尝试修改 TinyMCE 链接插件 (plugin.js) 以使其适应我正在工作的项目。

我无法在链接插件的模式窗口（对话框）中隐藏/显示项目。（我无法引用元素，因为我看到 他们的 ID 在新的执行中发生变化）

已编辑： （至少我想知道如何在对话框中引用一个元素。输入和选择框中不存在提供的“名称”（正如我在源代码中看到的那样），并且它们的 id 是在每个新页面上随机生成的请求。如果我可以参考元素，我可以采取其他方式找到解决方案）

我在链接插件的对话框中添加了一个名为“linktype”的选择框。如果其选择的值是“内部”，则 url 输入文本必须隐藏并显示另一个名为“实体”的组合框。另一方面，如果选择了“外部”，则隐藏组合框“实体”并显示输入框“网址”

我已经包含了一个在 onchange 闭包中调用的函数（在 link/plugin.js 中），尝试使用 DOM 方法来获取它，但没有成功。

var onTypeLinkChange = function(data) {
     //data are the modal window elements
     if ( data.linktype == 'intlink' ) {
         tinymce.DOM.hide(data.url);
         tinymce.DOM.show(data.entities);
     }
     else {
         tinymce.DOM.hide(data.entities);
         tinymce.DOM.show(data.url);
     }          
     return Option.none();
  }
  
  var onChange = function (getData, change) {
    if (change.name === 'linktype') {
      return onTypeLinkChange(getData());
    } else if (change.name === 'url') {
      return onUrlChange(getData());
   [...]
  };
  return { onChange: onChange };
};

【问题讨论】：

标签： javascript plugins tinymce

【解决方案1】：

在研究了如何访问对话中的元素之后，我想我可以得出结论，它不能。此外，理想情况下还需要隐藏/显示标签（与行中组件相关的所有内容）

因此我选择使用 jQuery 通过 CSS 访问它们。这不是我想要的，但它确实奏效了。

var onTypeLinkChange = function(data) {
    if ( data.linktype == 'intlink' ) {
        //hides row (label and input)
        $('.tox-dialog__body-content .tox-form__group').eq(1).hide();
    }
    else {
        $('.tox-dialog__body-content .tox-form__group').eq(1).show();
    }
    return Option.none();
}

【讨论】：