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屋!