首页 文章

TinyMCE将列表框项目呈现为html

提问于
浏览 次
9

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

但输出看起来像：

预期：

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

listbox tinymce

2 回答

  • 2

    Here is your updated snippet:

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

});

    Here is screenshot:

    回复于
  • 2

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

    实际上，不可能使用listbox创建的tinymce方式插入html代码 . 但是可以使用css设置列表框的样式 .

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

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

    回复于

相关问题