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
        }],
      }],
    });
  }
});

另见小提琴：http://jsfiddle.net/allcaps/vqctac3d/

但输出如下：

预期：

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

Answer 1

由于没有其他人回答这个问题，我会将评论中提出的解决方案/解决方法放到答案中。

实际上，无法使用列表框创建的简单方式插入html代码。但是可以使用css设置列表框的样式。

由于动态呈现列表框和其他可能的UI元素，因此可能很难找到正确的html dom元素。

解决此问题的方法是在创建列表框后交换列表框html。如果已知排序（这几乎是真的），这是可能的。

Answer 2

这是您的更新摘录：

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

---

我一直在寻找相同的东西，但列表框却可以这样做：

（有关更多信息，请参见小提琴）

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);
	
}

});

以下是屏幕截图：