动态更新TinyMCE 4 ListBox

3 回答

• 5

  我在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

  回复于 2024-04-29T09:07:37+08:00
• 7

  我尝试了TinyMCE论坛的解决方案，但我发现它有问题 . 例如，当我尝试多次更改第一个ListBox时，只有第一次生效 . 在弹出对话后立即改变到那个框没有任何效果 .

  但对于解决方案：

  不要拨打 button.menu.remove();

  此外，获取按钮引用的“黑客”是非常不必要的 . 您的工作可以简单地使用：

  var button = win.find("#button")[0];
  

  通过这些修改，我的ListBoxes工作正常 .

  整个对话功能：

  function ShowDialog() {
    var val;
    win = editor.windowManager.open({
            title: 'title',
            body: {type: 'form', 
            items: [
            {type: 'listbox', 
            name: 'categorybox', 
            text: 'pick one', 
            value: 0,
            label: 'Section: ', 
            values: categories,
            onselect: setValuebox(this.value())        
            },
            {type: 'listbox', 
            name: 'valuebox', 
            text:'pick one', 
            value: '',
            label: 'Page: ', 
            values: pagelist[0],
              onselect: function(e) {
                val = this.value();
              }
            }
            ]
          },
                  onsubmit: function(e) {
                      //do whatever
                  }
              });
  
        var valbox = win.find("#valuebox")[0]; 
  
        function setValuebox(i){
        //feel free to call ajax
        valbox.value(null);              
        valbox.menu = null;
        valbox.settings.menu = pagelist[i]; 
        // you can also set a value from pagelist[i]["values"][0]
        }
    }
  

  categories 和 pagelist 是在TinyMCE加载之前从DB生成的JSON . pagelist[category] =所选类别的ListBox数据 . category = 0表示全部 .

  希望我帮助过某个人，因为我已经挣扎了几个小时 .

  回复于 2024-04-29T09:07:37+08:00
• 9

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

  人们可能也必须更新状态对象 . 以下是使用来自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;
              });
          }
      });
  

  回复于 2024-04-29T09:07:37+08:00