TinyMCE render listbox items as html

Question

I created a TinyMCE plugin and need the listbox items to display html. This is my plugin:

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

See also the fiddle: http://jsfiddle.net/allcaps/vqctac3d/

But the output looks like:

Expected:

How can I mark the list option title save so the contents is rendered as html?

Answer 1

Here is your updated snippet:

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

---

I was looking for same thing but listbox and it can be done like this:

(see fiddle for more)

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

});

Here is screenshot:

Answer 2

Since noone else answered this question i will put the proposed solution/workaround from the comment into an answer.

Actually, it is not possible to insert html code using the tinymce way of listbox creation. But it is possible to style listboxes using css.

Due to the fact that listboxes and other tinymce UI elements get rendered dynamically it might be difficult to adress the correct html dom elements.

A workaround to this can be to exchange the listbox html after the listbox has been created. This is possible in case the ordering is known (and that is almost true).