Подключение редактора к SimpleGallery

Когда-то я написал статью о том, как можно менять и дорабатывать интерфейс SimpleGallery (SimpleGallery: расширение функционала, часть 2). С тех пор прошло немало времени, многое было переделано и та статья на сегодня представляет больше теоретический интерес: представленный код требует доработок, хотя общий принцип остался тот же.

Подключать будем TinyMCE4, так как он устанавливается вместе с самой системой. В прошлый раз было ограничение: нужно было, чтобы редактор был загружен на страницу. Чтобы избавиться от этого ограничения я немного доработал плагин: SimpleGallery Теперь редактор будет работать в галерее, даже если он не подключен для страницы документа.

В общих чертах, чтобы подключить редактор для редактирования описания картинки, потребуется:

• переопределить метод sgHelper.edit;
• сделать правку в шаблоне формы редактирования картинки для вызова редактора;
• создать форму для редактора.

Начнем с конца.

Форма для редактора будет показываться во всплывающем окне и ничего особенного из себя не представляет — настолько, что можно было бы даже не выносить ее в шаблон:

<div style="width:650px;">
	<textarea id="rteField" style="width:99%;height:400px;"></textarea>
</div>

О том, как этот шаблон компилировать, написано в прошлой статье. Или в файле readme.txt в папке с шаблонами.

В шаблон формы редактирования следует добавить ссылку, при нажатии на которую, откроется окно с редактором. В общем-то смысла тратить время на правку шаблона и компиляцию ради этой ссылки нет. Так что ссылку добавим на лету.

Теперь создадим файл, в который скопируем метод sgHelper.edit из simplegallery.js, а также добавим методы sgHelper.initRTE и sgHelper.rteForm — первый будет запускать редактор, а второй нужен, чтобы показывать окошко с редактором. Полностью файл — editrte.js

(function($){
sgHelper.initRTE = function() {
tinymce.init({
    //тут всякие настройки редактора
});
};
sgHelper.rteForm = function(textarea) {
var context = {
    textarea: textarea.val(),
};
var rteForm = $(Handlebars.templates.rteForm(context));
rteForm.dialog({
    modal:true,
    title:"Редактирование",
    collapsible:false,
    minimizable:false,
    maximizable:false,
    resizable:false,
    buttons:[
    {
        text:'Сохранить',
        iconCls: 'btn-green fa fa-check fa-lg',
        handler:function(){
            //когда нажимаем кнопку "сохранить", то сохраняем изменения в поле sg_description
            var content = tinymce.activeEditor.getContent();
            textarea.val(content);
            rteForm.window('close',true);
        }
    },{
        text:'Закрыть',
        iconCls: 'btn-red fa fa-ban fa-lg',
        handler:function(){
            rteForm.window('close', true);
        }
    }
    ],
    onOpen: function() {
        //как только окошко открылось, запустим редактор
        sgHelper.initRTE();
    },
    onClose: function() {
        var mask = $('.window-mask');
        //обязательно нужно выполнить эту команду при завершении, иначе редактор второй раз не запустится
        tinymce.execCommand('mceRemoveEditor',true,"rteField");
        sgHelper.destroyWindow(rteForm);
        $('body').append(mask);
    }
})
};
sgHelper.edit = function(image) {
// ...
editForm.dialog({
    // ...
    onOpen: function() {
        //добавим ссылку для открытия окошка с редактором         
        var descriptionField = $('textarea[name="sg_description"]','#sgEdit');
        descriptionField.after('<a href="javascript:" class="btn-rte">Редактировать</a>');
        $('.btn-rte').click(function(e){
            sgHelper.rteForm(descriptionField);
        });
        $('.image img',editForm).on('load',function() {
            // ...
        });
    },
    // ...
});
}
})(jQuery)

Теперь создаем файл custom.json, чтобы эти все скрипты загрузить:

{
"scripts": {
    "TinyMCE4": {
        "version":"4.3.6",
        "src":"assets/plugins/tinymce4/tinymce/tinymce.min.js"
    },
    "rteForm" : {
        "version":"1.4.1",
        "src":"assets/plugins/simplegallery/js/tpl/rteForm.js"
    },
    "editrte":{
        "version":"1.4.1",
        "src":"assets/plugins/simplegallery/js/plugin/editrte.js"
    }        
}
}

Если сравнить с прошлой статьей, то здесь добавилась запись для загрузки скрипта редактора, если он не загружен для документа.

Вот так вот сложно и непонятно делается подключение TinyMCE для редактирования описания картинок (: