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中使用列表框的示例（通常所有这些都需要在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列表框的价值并用其替换选择

1 个答案: