获取TinyMCE列表框的值并用它替换选择

Question

我正在尝试在tinymce的工具栏上添加一个自定义下拉列表。所需的功能是在编辑器中选择文本。单击下拉列表，选择首选颜色，然后将选择内容作为样式传输到span标记。我在提取所选元素时遇到问题。这是代码。

// theme colors
var posttileBox = null;

ed.addButton( 'theme_colors', {
    text: 'Theme colors',
    type   : 'listbox',
    name   : 't_color',
    label  : 'Theme colors',
    fixedWidth:!0,
    icon: false,
    values : [
        { text: 'transparent', value: 'transparent' },
        { value: '#fff', text: 'white' },
        { value: '#000', text: 'black' },
        { value: '#D1D2D4', text: 'grey' },
        { value: '#F0F2F1', text: 'lightgrey' },
        { value: '#D21F34', text: 'red' }, 
        { value: '#24376F', text: 'blue' },
        { value: '#DEE1E9', text: 'lightblue' },      
    ],
    value : "",
    onPostRender: function() {
        posttileBox = this;
    },
    onclick: function(e) {
        var selected_text = ed.selection.getContent();
        var return_text = '';
        return_text = '<span style="color:'+posttileBox.value()+';">' + selected_text + '</span>';                    
        ed.execCommand('mceInsertContent', 0, return_text);
    }
});

我已经试过了。但它不起作用。

e.data.t_color 

请给我一个提示。谢谢！

Answer 1

我设法找到了一个在Tiny MCE API中使用listbox的例子（通常是API中某处需要的），并结合我的代码我得到了这个

ed.addButton( 'theme_colors', {
    text: 'Theme colors',
    type   : 'listbox',
    name   : 't_color',
    label  : 'Theme colors',
    fixedWidth: !0,
    icon: false,
    onselect: function (e) {
    tinyMCE.activeEditor.dom.setStyle(tinyMCE.activeEditor.selection.getNode(), 'color', this.value() );
},
values : [
    { text: 'transparent', value: 'transparent' },
    { value: '#fff', text: 'white' },
    { value: '#000', text: 'black' },
    { value: '#D1D2D4', text: 'grey' },
    { value: '#F0F2F1', text: 'lightgrey' },
    { value: '#D21F34', text: 'red' }, 
    { value: '#24376F', text: 'blue' },
    { value: '#DEE1E9', text: 'lightblue' },      
],
value : "",
onPostRender: function () {
    this.value();
}

} );

如果有人不知道在哪里放置此代码或如何制作自定义按钮，这里有一篇关于tutsplus的好文章