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

Когда-то я написал статью о том, как можно менять и дорабатывать интерфейс SimpleGallery (http://modx.im/blog/docs/3277.html). С тех пор прошло немало времени, многое было переделано и та статья на сегодня представляет больше теоретический интерес: представленный код требует доработок, хотя общий принцип остался тот же. Но, пользуясь донатом от Agel_Nash , я воспроизведу ту часть, которая касается редактора.

Подключать будем 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 комментариев

avatar
Текстовый редактор для описания картинки? Мсье знает толк в извращениях)
avatar
Почему бы и нет? Несколько раз пользовался таким решением, например, список сотрудников с биографиями чтобы вывести.
avatar
Не ну можно и так конечно, хотя лично мне в таких случаях multiTV привычнее, но на вкус и цвет как говорится)
Комментарий отредактирован 2017-12-04 21:31:36 пользователем Extremum
avatar
Я тоже пользовался, достаточно удобно.
avatar
Интересно. А оформить это все установкой через Extras можно?
avatar
Зачем? Это же типа доработки под проект.
avatar
Вещь интересная, я сейчас эту галерею для многих решений использую, можно вообще включить в SimpleGallery по умолчанию, просто сделать в настройках галочку включить/отключить редактор. Ведь на этой галерее можно даже небольшой каталог делать, когда не нужно отдельную страницу под товар. Да много чего, где есть фотка и текст к ней. Т.е. я лично воспринимаю это не как доработка под проект, а как вообще доработка функционала очень хорошей галереи ))
avatar
Я на этом решении делал, например, статью-фотогалерею. Есть статьи, у которых структура такая: картинка, потом текст, потом опять картинка и снова текст, и так далее.

Можно, конечно, сделать такое через PageBuilder, но:
— нужно разбирать JSON, если выводить анонсы статей в блоге;
— когда я делал, PageBuilder'a ещё не было :)

В общем, получилось очень удобно.
Комментарий отредактирован 2017-12-05 12:37:20 пользователем Aharito
avatar
У кого-то получилось реализовать (кроме автора)?
В который раз сюда захожу, вспоминаю предыдущие свои попытки скопилировать через node.js, и отваливаю…
Поэтому поддерживаю предложение tiptop об удобоприменимом исполнении этого дополнения. И если уж не через Extras, то хотя бы положить в комплект скомпилированные файлы — стандартный и кастомный с редактором.

А идея хорошая и иногда нужная. Помнится, в предыдущей статье и по дополнительным полям речь шла.
  • paic
  • 0
avatar
Все и так лежит в комплекте. А что про дополнительные поля, так подход совсем не изменился со времен прошлой статьи. Но могу и про них написать, если кто-нибудь проспонсирует ((:
avatar
Спасибо, все оказалось просто:
1. Обновился (я тестирую на «живую» галерею).
2. Переименовал файл _custom.json в custom.json.
3. Очистил кэш админки, в том числе и браузера.
4. Обновил превью во вкладке галереи.
И появилась вожделенная ссылка Редактировать, и по клику на ссылку — текстовый редактор. И все работает. Для новой устанвки п.3,4 не надо.

Но финишный этап — вывести во фронт — не получился. Т.е. выводятся не теги, а скобки < >, как мне представляется, где то не хватает htmlspecialchars_decode. Или я что-то недоделал или недообновил.

p.s.Doclister тоже обновил, но не помогло.
avatar
Нашел причину. У меня в выводе было прописано
[+e.sg_description+]

Поменял на
[+sg_description+]

и все выводится отлично.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.