获取CKEditor当前样式信息

Question

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

Answer 1

文档对这个问题完全没有提及。据我通过深入研究源代码可知，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 样式，而其他样式是具有特定类的 span 元素）。

我的建议是只检查您真正关心的那些样式，并忽略其余的。这将使代码变得更加简单。

Answer 2

这是另一种方式（基于一些附加链接）。

您可以通过 editor.getSelection().getStartElement() 获取当前元素位置 - （编辑器是 CKEDITOR.instances.%编辑器实例%。

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

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

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

/*
 * 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);

取自：返回计算值的 jQuery CSS 插件元素的样式来伪克隆该元素？）

剩下要做的就是：

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

现在您可以检查分配给该元素的任何样式

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

在这种情况下，您可以使用attachStyleStateChange回调（它本身就相当萎缩，因为它只能返回天气的布尔指示，或者没有将某种样式应用于当前位置）。
它的好处是 - 每当样式状态发生更改时都会收到回调 - 也就是说 - 每当光标位置移动到具有不同样式属性的位置时 - 任何不同的属性而不仅仅是侦听器要验证的属性（取自 API http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#attachStyleStateChange)

将所有内容组合在一起以找出当前光标位置上当前应用的样式Every时间发生变化：

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

});