blog.kenfin

Sir Trevor. Обзор некоторых проблем и их решения

В качестве основного редактора контента для обновленного i.kenfin.ru, я решил взять SirTrevor. В этой заметке я хочу уделить внимание проблемам с которыми я столкнулся в процессе разработки.

Кастомная сериализация данных

Первая проблема с которой я столкнулся — метод toData.
Дело в том, что SirTrevor по умолчанию заполняется значениями элементов блока. Меня это не очень устраивало, поэтому погуглив несколько решений, наткнулся на метод toData. Этот метод был реализован в одном из кастомных виджетов, и я подумал что он вызывается для конвертации шаблона в объект данных. Однако, как выяснилось это не так. Пока что я не разобрался откуда и зачем этот метод на самом деле, но для реализации кастомной обработки можно воспользоваться методом _serializeData.

Пример реализации:

_serializeData : function() {
    var dataObj = {};
    dataObj.title = this.$('.title').html();
    dataObj.content = this.$('.content').html();
    dataObj.preview = this.$('.preview').attr('data-fid');
    dataObj.previewSrc = this.$('.img-preview').attr('src');
    dataObj.placementRight = this.$('.placement-right').prop('checked');

    return dataObj;
}

Событие block:create:new

Похоже, что в текущей версии SirTrevor не выстреливает событие block:create:new, который может быть очень полезен для дополнительной обработки блоков. Решение проблемы имеется в ишью на github.
upd: Похоже проблема имеется в bower версии sir-trevor-js (0.4.3), для установки свежего релиза через bower, можно воспользоваться такой командой:

bower install --save sir-trevor-js#0.6-dist

Однако в новой версии ребята перешли на Vanilla js, поэтому возможно придется переделать свои блоки для совместимости. Также в новой версии обязательно требуется реализовывать метод title.
Для совместимости со старыми блоками, полагающимися на jQuery и метод this.$(), можно воспользоваться таким костылем — JQCompatibleBlock, однако я все же рекомендую переводить их на ванильный js.

CKEDITOR и блоки SirTrevor

В текстовых блоках SirTrevor предоставляет нам минимальные возможности для манипуляций с текстом. В большинстве случаев этого должно быть вполне достаточно, однако для реализации полноценного wysiwyg поверх блоков Sir Trevor можно воспользоваться знаменитым CKEditor.

CK может использоваться как инлайновый редактор. Однако по умолчанию он применяется ко всем блокам с contentEditable=’true’, это все же не всегда корректное поведение, на мой взгляд, поэтому можно воспользоваться таким кодом:

$(function() {
    // это отключает автоматическое встраивание ckeditor к contenteditable
    CKEDITOR.disableAutoInline = true;
    // наша функция инициализации inline ckeditor
    var initCKEDITOR = function(context) {
        // элементы к которым будем применять ckeditor
        var $els = context.find('.ckeditor-inline[contenteditable="true"]');

        $els.each(function(iter, el) {
            CKEDITOR.inline(el);
        });
    }
    // инициализация Sir Trevor
    var editor = new SirTrevor.Editor({
        el : document.querySelector('.sir-trevor')
    });
    // первоначальная инициализация inline ckeditor
    initCKEDITOR($(editor.wrapper));
    // инициализация ckeditor на каждом новом блоке
    SirTrevor.EventBus.on('block:create:new', function(block) {
        initCKEDITOR($(block.el));
    });
});

Теперь инлайновый CKEditor будет применяться только к элементам с классом .ckeditor-inline.