listbox - TinyMCE将列表框项呈现为html

Question

我创建了一个TinyMCE插件，并且需要列表框项来显示html。这是我的插件:

editor.addButton('icons', {
  title: 'Foo',
  text: 'Foo',
  type: 'button',
  onclick: function() {
    editor.windowManager.open({
      title: 'Foo',
      width: 300,
      height: 200,
      body: [{
        type: 'listbox',
        label: 'Foo',
        name: 'foo',
        values: [{
          title: '<em>Foo</em>', // <-- Mark save. Render as html.
          value: 1
        }],
      }],
    });
  }
});

另请参见 fiddle : http://jsfiddle.net/allcaps/vqctac3d/

但是输出看起来像:



预期的:



如何标记列表选项标题保存，以便将内容呈现为html？

Answer 1

这是您更新的代码段:

https://jsfiddle.net/mzvarik/1cwr07z6/55/

我一直在寻找相同的东西，但列表框，它可以像这样完成:

(有关更多信息，请参见 fiddle )

editor.addButton('myshortcuts', {
	type: 'listbox',
	text: 'Vložit proměnnou',
	values: self.shortcuts_data,
	onselect: function() {
               // do something
		this.value(null); //reset selected value
	},
onShow: function (event) {
	var panel = $(event.control.getEl()),
		button = event.control.parent().getEl();
	
	var i=0;
	panel.find('.mce-text').each(function(){
		var item = $(this);
		if (!item.next('.mce-menu-shortcut').length) {
                                // THIS WILL ADD HTML TO EXISTING MENU ITEM
			item.after('<div class="mce-menu-shortcut">('+self.shortcuts_data[i].value+')</div>');
		}
		i++;
	});
	
	setTimeout(function(){
		panel.css('width', 360);
		panel.children().first().css('width', 360);
	}, 5);
	
}

});

这是屏幕截图: