Подключение редактора к SimpleGallery
Когда-то я написал статью о том, как можно менять и дорабатывать интерфейс SimpleGallery (http://modx.im/blog/docs/3277.html). С тех пор прошло немало времени, многое было переделано и та статья на сегодня представляет больше теоретический интерес: представленный код требует доработок, хотя общий принцип остался тот же. Но, пользуясь донатом от Agel_Nash , я воспроизведу ту часть, которая касается редактора.
Подключать будем TinyMCE4, так как он устанавливается вместе с самой системой. В прошлый раз было ограничение: нужно было, чтобы редактор был загружен на страницу. Чтобы избавиться от этого ограничения я немного доработал плагин: github.com/Pathologic/SimpleGallery/commit/fffa9a6185ff4a7fdb85bac424faecfef49e2518#diff-539edf2ee1c4a9f165e888bd72019274R6 Теперь редактор будет работать в галерее, даже если он не подключен для страницы документа.
В общих чертах, чтобы подключить редактор для редактирования описания картинки, потребуется:
Начнем с конца.
Форма для редактора будет показываться во всплывающем окне и ничего особенного из себя не представляет — настолько, что можно было бы даже не выносить ее в шаблон:
О том, как этот шаблон компилировать, написано в прошлой статье. Или в файле readme.txt в папке с шаблонами.
В шаблон формы редактирования следует добавить ссылку, при нажатии на которую, откроется окно с редактором. В общем-то смысла тратить время на правку шаблона и компиляцию ради этой ссылки нет. Так что ссылку добавим на лету.
Теперь создадим файл, в который скопируем метод sgHelper.edit из simplegallery.js, а также добавим методы sgHelper.initRTE и sgHelper.rteForm — первый будет запускать редактор, а второй нужен, чтобы показывать окошко с редактором. Полностью файл — github.com/Pathologic/SimpleGallery/blob/master/assets/plugins/simplegallery/js/plugin/editrte.js
Теперь создаем файл custom.json, чтобы эти все скрипты загрузить:
Если сравнить с прошлой статьей, то здесь добавилась запись для загрузки скрипта редактора, если он не загружен для документа.
Вот так вот сложно и непонятно делается подключение TinyMCE для редактирования описания картинок (:
Подключать будем TinyMCE4, так как он устанавливается вместе с самой системой. В прошлый раз было ограничение: нужно было, чтобы редактор был загружен на страницу. Чтобы избавиться от этого ограничения я немного доработал плагин: github.com/Pathologic/SimpleGallery/commit/fffa9a6185ff4a7fdb85bac424faecfef49e2518#diff-539edf2ee1c4a9f165e888bd72019274R6 Теперь редактор будет работать в галерее, даже если он не подключен для страницы документа.
В общих чертах, чтобы подключить редактор для редактирования описания картинки, потребуется:
- переопределить метод sgHelper.edit;
- сделать правку в шаблоне формы редактирования картинки для вызова редактора;
- создать форму для редактора.
Начнем с конца.
Форма для редактора будет показываться во всплывающем окне и ничего особенного из себя не представляет — настолько, что можно было бы даже не выносить ее в шаблон:
<div style="width:650px;">
<textarea id="rteField" style="width:99%;height:400px;">{{textarea}}</textarea>
</div>
О том, как этот шаблон компилировать, написано в прошлой статье. Или в файле readme.txt в папке с шаблонами.
В шаблон формы редактирования следует добавить ссылку, при нажатии на которую, откроется окно с редактором. В общем-то смысла тратить время на правку шаблона и компиляцию ради этой ссылки нет. Так что ссылку добавим на лету.
Теперь создадим файл, в который скопируем метод sgHelper.edit из simplegallery.js, а также добавим методы sgHelper.initRTE и sgHelper.rteForm — первый будет запускать редактор, а второй нужен, чтобы показывать окошко с редактором. Полностью файл — github.com/Pathologic/SimpleGallery/blob/master/assets/plugins/simplegallery/js/plugin/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 для редактирования описания картинок (:
12 комментариев
Можно, конечно, сделать такое через PageBuilder, но:
— нужно разбирать JSON, если выводить анонсы статей в блоге;
— когда я делал, PageBuilder'a ещё не было :)
В общем, получилось очень удобно.
В который раз сюда захожу, вспоминаю предыдущие свои попытки скопилировать через node.js, и отваливаю…
Поэтому поддерживаю предложение tiptop об удобоприменимом исполнении этого дополнения. И если уж не через Extras, то хотя бы положить в комплект скомпилированные файлы — стандартный и кастомный с редактором.
А идея хорошая и иногда нужная. Помнится, в предыдущей статье и по дополнительным полям речь шла.
1. Обновился (я тестирую на «живую» галерею).
2. Переименовал файл _custom.json в custom.json.
3. Очистил кэш админки, в том числе и браузера.
4. Обновил превью во вкладке галереи.
И появилась вожделенная ссылка Редактировать, и по клику на ссылку — текстовый редактор. И все работает. Для новой устанвки п.3,4 не надо.
Но финишный этап — вывести во фронт — не получился. Т.е. выводятся не теги, а скобки < >, как мне представляется, где то не хватает htmlspecialchars_decode. Или я что-то недоделал или недообновил.
p.s.Doclister тоже обновил, но не помогло.
Поменял на
и все выводится отлично.