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

Question

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

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

已编辑： （至少我想知道如何在对话框中引用元素。提供的 'name' 在输入和选择框中不存在（正如我在源代码中看到的那样），并且它们的 ID 是随机生成的新页面请求。如果我可以引用元素我可以通过其他方式找到解决方案）

我在 link 插件的对话框中添加了一个名为 'linktype' 的选择框。如果其选择的值为 'internal'，则 url 输入文本必须隐藏和显示另一个名为 'entities' 的组合框。另一方面，如果选择 'external'，则隐藏组合框 'entities' 并显示输入框 '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 };
};

Answer 1

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

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

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();
}

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

TinyMCE 5.2. How to reference dialog elements in a plugin

javascript

plugins

tinymce