如何在TinyMCE中获取所选内容的颜色

How can I get the color of the selection in TinyMCE?

本文关键字:颜色 获取 TinyMCE      更新时间:2023-09-26

我正在创建一个嵌入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');
}

但CCD_ 1。如何获取所选文本的前景色或tinyMCE中插入点处的文本?

编辑:进一步追踪,在tiny_mce_prototype_src.js的12377行,我看到:

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

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

我会尝试用另一种方式(没有检查)——采用计算样式:

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

我不知道你是否解决了这个问题,但我做的是:

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编辑器的变量。

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

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

这将执行

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