如何在 TinyMCE 中获得选择的颜色？答案

【问题标题】：How can I get the color of the selection in TinyMCE?如何在 TinyMCE 中获得选择的颜色？
【发布时间】：2012-01-27 00:08:47
【问题描述】：

我正在创建一个嵌入了 TinyMCE 编辑器的应用程序。当 tinyMCE 编辑器中的选择发生变化时，我希望我的应用程序的控件能够更新，因此字体、大小和颜色菜单会显示选择的字体、大小和颜色。字体和颜色工作正常，但我不知道如何获得颜色。这是我正在使用的代码：

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');
}

但是color === false。如何获取选定文本的前景色或tinyMCE中插入点的文本？

编辑： 进一步追踪，在tiny_mce_prototype_src.js 的第 12377 行我看到了：

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

当我在调试器中执行此操作时，t.editorCommands.queryCommandValue(c); 返回 false。

【问题讨论】：

您是要获取选区的颜色，还是用仪器在面板上选的颜色？
你想要背景颜色还是文本颜色？
@Cheery 我想要选中文本的颜色；我隐藏了 TinyMCE 工具栏。
@Thariama 我想要文字颜色。

标签： javascript tinymce

【解决方案1】：

我会尝试用另一种方式来做（没有检查它）——采用计算样式：

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

【讨论】：

对不起，Object tinyMCE has no method 'getStyle'
@Josh 抱歉，漏了一个字 :) 检查更新版本。它计算当前样式，而不是从 css 或样式属性读取样式。
这几乎有效。问题是，在像test 这样的HTML 上，它返回"" 我猜是因为 没有CSS 颜色， 确实...
@Josh 而 getStyle 应该是根据父级的颜色来获取颜色的。可以？如果没有，写成 tinyMCE.DOM.getStyle(node, 'color', true) ps：很抱歉更新了这么多……我是 CKEditor 的粉丝 :)

【解决方案2】：

我不知道你是否解决了这个问题，但我所做的是：

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 "";

其中 ed 是 tinyMCE 编辑器的变量。

【讨论】：

【解决方案3】：

如果您的选择完全在彩色文本内，这将起作用

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

【讨论】：

到目前为止，这看起来很有希望！现在进一步测试，如果有效，将接受！
这几乎有效。问题是，在像test 这样的HTML 上，它返回"" 我猜是因为 没有CSS 颜色， 确实...

【解决方案4】：

这样就可以了

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

【讨论】：