tinymce - 动态更新 TinyMCE 4 ListBox

Question

我正在尝试修改 TinyMCE 4“链接”插件，以允许用户从 AJAX 请求动态更新的 ListBox 元素中选择内容。

我在 editor.windowManager.open() 之前创建 ListBox 元素，因此它们最初可以正确呈现。我有一个执行 AJAX 请求的 onselect 处理程序，并以 JSON 格式获取响应。

我需要对 JSON 响应做的是让它更新另一个 ListBox 元素，用新结果替换现有项目。

我很困惑，文档非常不清楚。我不知道我是应该替换整个控件，还是删除项然后添加新项。我不知道我是否需要实例化一个新的 ListBox 控件，或者将其呈现为 HTML 等。

基本上，我可以访问原始呈现的 ListBox (name: "module"} 与
win.find('#module');
我有来自 AJAX 请求的新值:
var data = tinymce.util.JSON.parse(text).data;
我已经尝试创建一个新的 Control 配置对象，比如

newCtrlconfig = {
    type: 'listbox',
    label: 'Class',
    values: data
};

但我不知道如何渲染它，更不用说替换现有的了。

我试过
var newList = tinymce.ui.Factory.create(newCtrlconfig);
进而
newList.renderHtml()
但即便如此，呈现的 HTML 也不包含项目的任何标记。检查这些对象只是令人沮丧:有“设置”、“值”、“_值”、“项目”，所有这些都可以愉快地存储我的值，但甚至不清楚它们中的哪些会起作用。

由于它是一个 ListBox 而不是一个简单的 SELECT 菜单，我什至不能轻松地使用 DOM 来操作这些值。

有人在 4.x 中征服了 TinyMCE ListBox 吗？

Answer 1

我在 the TinyMCE forum 上找到了这个我已经确认它有效:

tinymce.PluginManager.add('myexample', function(editor, url) {
   var self = this, button;

   function getValues() {
      return editor.settings.myKeyValueList;
   }
   // Add a button that opens a window
   editor.addButton('myexample', {
      type: 'listbox',
      text: 'My Example',
      values: getValues(),
      onselect: function() {
         //insert key
         editor.insertContent(this.value());

         //reset selected value
         this.value(null);
      },
      onPostRender: function() {
         //this is a hack to get button refrence.
         //there may be a better way to do this
         button = this;
      },
   });

   self.refresh = function() {
      //remove existing menu if it is already rendered
      if(button.menu){
         button.menu.remove();
         button.menu = null;
      }

      button.settings.values = button.settings.menu = getValues();
   };
});


Call following code block from ajax success method
//Set new values to myKeyValueList 
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'newtext', value: 'newvalue'}];
//Call plugin method to reload the dropdown
tinyMCE.activeEditor.plugins.myexample.refresh();

这里的关键是您需要执行以下操作:

通过从 onPostRender 方法中的“this”获取“button”引用

用你想要的值更新 button.settings.values 和 button.settings.menu

要更新现有列表，请调用 button.menu.remove() 和 button.menu = null