How can I get the highlight color in TinyMCE?

Question

I am creating an application with the TinyMCE editor built into it. I want the controls for my application to be updated when the selection changes inside the tinyMCE editor, so the font, size and color menus display the font, size and color of the selection. Font and color work fine, but I can't figure out how to get the color. Here is the code I'm using:

myTinyMCESettings.handle_node_change_callback = function(editor_id,node,undo_index,undo_levels,visual_aid,any_selection){ var editor = tinyMCE.get(editor_id); selectionChanged(editor,!any_selection); }; tinyMCE.init(myTinyMCESettings); function selectionChanged(ed,selection){ var fontName = ed.queryCommandValue('FontName'); var size = parseInt(ed.queryCommandValue('FontSize')); var color = ed.queryCommandValue('ForeColor'); } 

But color === false . How to get the foreground color of selected text or text at an insertion point within tinyMCE?

EDIT: Track this further, on line 12377 of tiny_mce_prototype_src.js I see:

 // Registred commands o = t.editorCommands.queryCommandValue(c); 

When I view this in my debugger, t.editorCommands.queryCommandValue(c); returns false.

Answer 1

I would try to do it differently (did not check) - taking the computed style:

 myTinyMCESettings.handle_node_change_callback = function(editor_id,node,undo_index,undo_levels,visual_aid,any_selection){ var editor = tinyMCE.get(editor_id); var color = tinyMCE.DOM.getStyle(node, 'color', true); // computes current color selectionChanged(editor,!any_selection); }; 

Answer 2

I do not know if you have solved this, but I have done this:

 var node = ed.selection.getNode(); node_array = tinyMCE.DOM.getParents(node); for(i = 0; i < node_array.length; i++){ var the_node = node_array[i]; var color = the_node.style.color; if(color != "" && color != "undefined" && color != null){ return color; } } return ""; 

Where ed is your tinyMCE editor variable.

Answer 3

This will work if your choice is completely inside the colored text.

 tinymce.get('my_editor_id').selection.getNode().style.color; 

Answer 4

It will do

 tinymce.get('my_editor_id').getContentAreaContainer().style.color= "red"