时间戳

首页 > 解决方案 > TinyMCE 5.2。如何在插件中引用对话框元素

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

问题描述

我正在尝试修改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 };
};

标签： javascriptpluginstinymce

解决方案

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

Therefore I have chosen to access them via CSS, using jQuery. It is not what I was desire but it has worked.

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

推荐阅读