在CKEditor中获取当前样式信息

如何获取工具栏上当前光标位置的样式状态信息。

文档中对此问题完全没有提及。据我对源代码的深入了解，CKEditor没有保存当前位置的样式的内部日志。它只是根据需要重新计算它们，即在需要向选择添加新样式时

请记住，CKEditor实际上是在构建和修改整个DOM树，因此它应用的样式将级联到节点。看来，提取样式信息的唯一方法是从当前光标位置向上遍历DOM树，记录每个祖先的样式信息，直到到达编辑器的主体节点

下面的代码应该可以让您开始遍历祖先节点：

//Or however you get your current editor
var editor = CKEDITOR.currentInstance;

//This will pull the minimum ancestor that encompasses the entire selection,
//so if you just want to use the cursor it will give you the direct parent
//node that the cursor is inside
var node = editor.getSelection().getCommonAncestor();

//This is all the ancestors, up to the document root
var ancestors = node.getParents();

//This is the editors body node; you don't want to go past this
var editor_body = editor.getBody();

var body_ancestors = editor_body.getParents();

//The ancestors list descends from the root node, whereas we want
//to ascend towards the root
for (var i = ancestors.length - 1; i >= 0; i--;) {
    //Pull the node
    var a = ancestors[i];

    //You've hit the body node, break out of the loop
    if (a.getText() == editor_body.getText()) break;

    //This is a node between the cursor's node and the editor body,
    //pull your styling information from the node here
}

由于CKEditors样式界面的可定制性，没有一组样式可以检查，也没有遵循相同的形式（例如，一些样式将是CSS样式，而另一些样式将是具有特定类的跨元素）

我的建议是只检查那些你真正关心的风格，而忽略其余的。这将使代码更加简单。

这里是另一种方法（基于一些附加链接）

您可以通过

编辑器.getSelection（）.getStartElement（）

-（编辑器是CKEDITOR.instances.%编辑器实例%）获取当前元素位置

现在，您可以为jquery包装实际元素（或使用jquery适配器..）：

这将允许您使用以下插件，该插件解析给定元素（内联和继承）的所有样式：

现在，您可以检查指定给元素的任何样式

另一个小提示是-每次更改位置或样式时，当前光标位置的样式是什么：

在这种情况下，您可以使用attachStyleStateChange回调（它本身非常萎缩，因为is只能返回天气的布尔指示，或者某个样式未应用于当前位置）。 它的好处是——每当样式状态发生更改时都会收到回调——也就是说，每当光标位置移动到具有不同样式属性的位置时——任何不同的属性，而不仅仅是侦听器要验证的属性（取自API）

将所有内容组合在一起，以确定每次更改内容时，当前光标位置上应用的当前样式是什么：

editor.on('instanceReady', function () {
                    //editor.setReadOnly(true);
                    var styleBold = new CKEDITOR.style(CKEDITOR.config.coreStyles_bold);
                    editor.attachStyleStateChange(styleBold, function (state) {
                        var currentCursorStyles = $(editor.getSelection().getStartElement().$).getStyleObject();
                        // For instance, the font-family is:
                        var fontFamily = currentCursorStyles.fontFamily;
                    });

});

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

$(editor.getSelection().getStartElement().$).getStyleObject()

editor.on('instanceReady', function () {
                    //editor.setReadOnly(true);
                    var styleBold = new CKEDITOR.style(CKEDITOR.config.coreStyles_bold);
                    editor.attachStyleStateChange(styleBold, function (state) {
                        var currentCursorStyles = $(editor.getSelection().getStartElement().$).getStyleObject();
                        // For instance, the font-family is:
                        var fontFamily = currentCursorStyles.fontFamily;
                    });

});