如何将项目添加到列表框?

时间:2014-03-11 09:28:45

标签: javascript html tinymce wysiwyg tinymce-4

我仍在将tinymce版本3升级到版本4。

我遇到的问题是使用工具栏ui。 我能够创建一个包含多个条目的列表框,但我不知道如何在创建列表框后添加列表框元素。 使用tinymce3,即使在创建该列表之后,也很容易将列表项添加到列表中。 我不知道如何用tinymce 4实现这一点。

我需要做什么?有什么建议吗?

这里是我用来创建列表框的代码:

        editor.addButton('my_listbox', {
            type: 'listbox',
            text: 'my_listbox_desc',
            icon: false,
            onselect: function(e) {
                editor.insertContent(this.value());
            },
            values:[
                {text: 'Menu item 1', value: 'Some text 1'},
                {text: 'Menu item 2', value: 'Some text 2'},
                {text: 'Menu item 3', value: 'Some text 3'}
            ],
            onPostRender: function() {
                // Select the third item by default
                editor.irstyle_control = this;
                this.value('Some text 3');
            }
        });

1 个答案:

答案 0 :(得分:0)

我有同样的问题......在他们的论坛上访问了很多主题后,我开始写这样的东西

  tinymce.PluginManager.add('sampleWithEditable', function(ed, url) {

    var me=this, dynamicallyEditable;

   function getValues() {
  return ed.settings.myKeyValueList;
   }
ed.addButton('my_listbox', {
        type: 'listbox',
        text: 'my_listbox_desc',
        icon: false,
        onselect: function(e) {
            ed.insertContent(this.value());
        },
        values:[
            {text: 'Menu item 1', value: 'Some text 1'},
            {text: 'Menu item 2', value: 'Some text 2'},
            {text: 'Menu item 3', value: 'Some text 3'}
        ],
        onPostRender: function() {
            // Select the third item by default
            ed.irstyle_control = this;
            this.value('Some text 3');

            dynamicallyEditable=this
        }});

   me.refresh = function() {
  if(dynamicallyEditable.dynamicallyAdded){
     dynamicallyEditable.dynamicallyAdded.remove();
     dynamicallyEditable.dynamicallyAdded = null;
      }

      dynamicallyEditable.settings.values =     dynamicallyEditable.settings.dynamicallyAdded = getValues();
   };

    }

然后从ajax成功方法

   tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'text_here', value: 'value_there'}]; 
   tinyMCE.activeEditor.plugins.sampleWithEditable.refresh();