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 plugin that returns computed style of element to pseudo clone that element?）

剩下要做的就是：

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

现在您可以检查任何符合该元素的样式。

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

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

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

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

});

在CKEditor中获取当前样式信息

2 个答案: