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

这是您更新的代码片段：

\n\n

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

\n\n\n\n

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

\n\n

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

\n\n

\r\n

\r\n

editor.addButton(\'myshortcuts\', {\r\n\ttype: \'listbox\',\r\n\ttext: \'Vlo\xc5\xbeit prom\xc4\x9bnnou\',\r\n\tvalues: self.shortcuts_data,\r\n\tonselect: function() {\r\n               // do something\r\n\t\tthis.value(null); //reset selected value\r\n\t},\r\nonShow: function (event) {\r\n\tvar panel = $(event.control.getEl()),\r\n\t\tbutton = event.control.parent().getEl();\r\n\t\r\n\tvar i=0;\r\n\tpanel.find(\'.mce-text\').each(function(){\r\n\t\tvar item = $(this);\r\n\t\tif (!item.next(\'.mce-menu-shortcut\').length) {\r\n                                // THIS WILL ADD HTML TO EXISTING MENU ITEM\r\n\t\t\titem.after(\'<div class="mce-menu-shortcut">(\'+self.shortcuts_data[i].value+\')</div>\');\r\n\t\t}\r\n\t\ti++;\r\n\t});\r\n\t\r\n\tsetTimeout(function(){\r\n\t\tpanel.css(\'width\', 360);\r\n\t\tpanel.children().first().css(\'width\', 360);\r\n\t}, 5);\r\n\t\r\n}\r\n\r\n});

\r\n

\r\n

\r\n

\n\n

这是屏幕截图：

\n\n

\n