Подключение редактора к SimpleGallery
- Дополнения
- SimpleGallery
- Подключение редактора
Подключение редактора к 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 для редактирования описания картинок (: