javascript - How can I get the color of the selection in TinyMCE? - Stack Overflow

admin管理员组

文章数量:1289874

I am creating an application with a TinyMCE editor embedded inside it. I want the controls for my application to update when the selection inside the tinyMCE editor changes, so the font, size and color menus show 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 am 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 can I get the foreground color of the selected text or the text at the insertion point within tinyMCE?

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

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

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

I am creating an application with a TinyMCE editor embedded inside it. I want the controls for my application to update when the selection inside the tinyMCE editor changes, so the font, size and color menus show 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 am 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 can I get the foreground color of the selected text or the text at the insertion point within tinyMCE?

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

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

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

• javascript
• tinymce

Share Improve this question Follow edited Jan 27, 2012 at 0:20 Josh asked Jan 27, 2012 at 0:08 JoshJosh 11.1k1111 gold badges6666 silver badges111111 bronze badges 4

• 1 Do you want to get the color of the selection or the color chosen on the panel with instruments? – Cheery Commented Jan 27, 2012 at 2:29
• Do you want the background-color or text color? – Thariama Commented Jan 27, 2012 at 8:34
• @Cheery I want the color of the selected text; I am hiding the TinyMCE toolbar. – Josh Commented Jan 27, 2012 at 13:12
• @Thariama I want the text color. – Josh Commented Jan 27, 2012 at 13:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

I would try to do it in another way (did not check it) - taking puted 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); // putes current color
    selectionChanged(editor,!any_selection);
};

I dont know if you solved this, but what i did was:

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 the variable of your tinyMCE editor.

This will work if your selection is fully inside the colored text

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

This will do

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

本文标签： javascriptHow can I get the color of the selection in TinyMCEStack Overflow