Получить текущую информацию о стиле в CKEditor

Question

Как получить информацию о состояниях стилей, представленных на панели инструментов в текущей позиции курсора.

Answer 1

В документации по этому вопросу ничего не говорится. Насколько я могу судить по копанию в исходном коде, CKEditor не ведет внутренний журнал того, какие стили находятся в текущей позиции. Он просто пересчитывает их по мере необходимости, а именно всякий раз, когда ему нужно добавить новые стили в выделение.

Пожалуйста, имейте в виду, что CKEditor фактически строит и модифицирует все дерево DOM, и поэтому применяемые им стили каскадно перемещаются по узлам. Похоже, что единственный способ получить информацию о стиле - это пройти вверх по дереву DOM с текущей позиции курсора, записав информацию о стиле от каждого предка, пока не достигнете узла body редактора.

Следующий код поможет вам начать обход узлов-предков:

//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 (который сам по себе довольно атрофирован, так как is может возвращать только логическое значениеиндикация погодыили не определенный стиль применяется к текущей позиции).Хорошая вещь об этом - обратный вызов принимается при каждом изменении состояния стиля, то есть всякий раз, когда позиция курсора перемещается в позицию с другими атрибутами стиля. Любой другой атрибут, а не только атрибут, который слушатель хотел проверить.(Взято из 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;
                    });

});