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

由于没有其他人回答这个问题，我将把评论中提出的 solution/workaround 放入答案中。

实际上，使用 tinymce 创建列表框的方式无法插入 html 代码。但是可以使用 css.

来设置列表框的样式

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

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

Answer 2

这是您更新后的代码段：

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

});

截图如下：

TinyMCE 将列表框项目渲染为 html

TinyMCE render listbox items as html

listbox

tinymce