Ufdjrw

I'm trying to add a custom drop-down list on tinymce's toolbar. The desired functionality is to select the text in the editor. Click on the drop-down list, select the preferred color and transfer the selection to the span tag with this color as the style. I have a problem with extracting the selected element. Here is the code.

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

i already have tried this. But it's not working.

e.data.t_color 

Please give me a hint. Thanks!

I managed to find an example of using the listbox in Tiny MCE API ( often all that is needed somewhere in API ), and in combination with my code I get this

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

);

If someone does not know where to place this code or how to make custom buttons, here’s a good article on tutsplus