动态更新TinyMCE 4列表框

我试图修改TinyMCE 4链接插件，允许用户从列表框元素中选择内容，这些元素由AJAX请求动态更新

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

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

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

基本上，我可以使用

win.find'module'

我从AJAX请求中获得了新值：

var data=tinymce.util.JSON.parsetext.data

我尝试创建一个新的控件配置对象，比如

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

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

我试过了

var newList=tinymce.ui.Factory.createnewCtrlconfig

然后

newList.renderHtml

但即便如此，呈现的HTML也不包含这些项的任何标记。检查这些对象是令人沮丧的：有设置、值、值、项目，所有这些都能很好地存储我的值，但甚至不清楚哪一个会起作用

因为它是一个列表框，而不是一个简单的选择菜单，所以我甚至不能轻易地使用DOM来操作这些值

有人征服了4.x中的TinyMCE列表框吗？

我在上找到了它，我已经确认它是有效的：

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

---

我尝试了TinyMCE论坛的解决方案，但发现它有问题。例如，当我多次尝试更改第一个列表框时，只有第一次生效。另外，在对话框弹出后对该框的第一次更改也没有产生任何效果

但解决办法是：

不要调用button.menu.remove

另外，获取按钮引用的黑客操作是非常不必要的。您只需使用以下工具即可完成工作：

var button=win.findbutton[0]； 通过这些修改，我的列表框工作正常

整个对话功能：

函数显示对话框{ var-val； win=editor.windowManager.open{ 标题：“标题”， 正文：{type:'form'， 项目：[ {类型：'listbox'， 名称：'categorybox'， 文本：“选择一个”， 值：0， 标签：“节：”， 值：类别， onselect:setValueboxthis.value }, {类型：'listbox'， 名称：“valuebox”， 文本：'选择一个'， 值：， 标签：“页面：”， 值：页面列表[0]， onselect:function{ val=该值； } } ] }, 提交人：functione{ //做任何事 } }; var-valbox=win.findvaluebox[0]； 函数setValueboxi{ //请随意调用ajax valbox.valuenull； valbox.menu=null； valbox.settings.menu=页面列表[i]； //您还可以从页面列表[i][values][0]中设置一个值 } } categories和pagelist是TinyMCE加载之前从DB生成的JSON。pagelist[类别]=所选类别的列表框数据。类别=0表示全部

---

希望我帮助了一些人，因为我已经为此奋斗了好几个小时。

wordpress 4.3中包含的tinyMCE版本似乎改变了一些东西，并添加了一个状态对象来缓存初始菜单，因此更改菜单已经不够了

可能还需要更新state对象。下面是使用来自ajax请求的数据更新菜单的示例：

editor.addButton('shortcodes', {
        icon: 'icon_shortcodes',
        tooltip: 'Your tooltip',
        type: 'menubutton',
        onPostRender: function() {
            var ctrl = this;
            $.getJSON( ajaxurl , function( menu) {
                // menu is the array containing your menu items
                ctrl.state.data.menu = ctrl.settings.menu = menu;
            });
        }
    });

---

据我所知，TinyMCE 4.9中已经突破了这些其他方法。 在花了一天的大部分时间修补我自己对这些方法的使用之后，我发现了以下功能：

function updateListbox(win, data) { // win is a tinymce.ui.Window
  listbox = win.find('#listbox'); // Substitute your listbox 'name'
  formItem = listbox.parent();

  listbox.remove();
  formItem.append({
    label: 'Dynamic Listbox',
    type: 'listbox',
    name: 'listbox',
    values: data
  });
}

---

谢谢Moeri我正在寻找重置选项//将所选值重置为this.valuenull；嘿，我正在尝试添加一个列表，并按照您所说的做了，但在myexample.refresh之后，我可以在中看到“我的示例”按钮，但它没有任何选项，即列表为空。此外，我在菜单栏中看不到这一点，必须将工具栏放在“myexample”中才能看到按钮。对于Tinymce 4.3+，您必须使用：button.settings.values=button.state.data.menu=items；首先，请学习如何添加自定义插件，然后只有你才能理解如何集成到你的代码

---

tinyMCE的版本是4.2，感谢您指出了这一变化。对于列表框按钮，它最终是ctrl.state.data.menu=ctrl.settings.values=menu；为我而不是设置。菜单。这适用于WP 4.5.1和TinyMCE 4.3.10。这对于WP 4.7.2仍然是准确的