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

Question

我正在尝试在 tinymce 的工具栏上添加自定义下拉列表。所需的功能是 select 编辑器中的文本。单击下拉列表，select 首选颜色并将 selection 转移到以该颜色为样式的 span 标签。我在提取 selected 元素时遇到问题。这是代码。

// 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 中找到了一个使用列表框的示例（通常在 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

的好文章

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

Get Value of TinyMCE listbox and replase selection with it

javascript

wordpress

tinymce

tinymce-4