TinyMCE将列表框项呈现为html [英] TinyMCE render listbox items as html

问题描述

我创建了一个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?

解决方案

以下是您的更新摘录:

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

}); 

以下是屏幕截图:

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?

解决方案

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:

这篇关于TinyMCE将列表框项呈现为html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！