TinyMCE + Tickets + выбор главной картинки в TV

Добрый день. Понадобился функционал удобного редактора textarea во фронтенде Tickets, а также сделать возможность пользователю выбрать главную картинку для тикета.

Вот что получилось:


Инструкция под катом

Да простите меня за велосипеды

1. Установка TinyMCE
Почему этот редактор? Перепробовал много разных, но только TinyMCE не создает лишних тегов и Tickets нормально обрабатывает контент + удобно кастомизируется и быстро работает

1.1 Непосредственно в чанке создания тикета добавляем такой код:

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
editor.addButton("style-" + name, {
tooltip: "Header " + name.toUpperCase(),
text: name.toUpperCase(),
onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function() {
var self = this, setup = function() {
editor.formatter.formatChanged(name, function(state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});

tinymce.init({
selector: ".cont-edit",
setup: function (editor) {editor.on('change', function () {editor.save();});},
plugins: ['advlist autolink lists link image charmap print preview anchor','searchreplace visualblocks code fullscreen','insertdatetime media table contextmenu paste code stylebuttons ticketsfiles'],
advlist_bullet_styles:'',
advlist_number_styles:'',
menu:{},
toolbar:'undo redo | style-h2 style-h3 bold italic underline strikethrough alignleft aligncenter | bullist numlist | link image code'
});
</script>

в tinymce.init обязательно должен присутствовать код

setup: function (editor) {editor.on('change', function () {editor.save();});}

иначе в textarea ничего не будет попадать и Tickets будет ругаться.
В списке плагинов должен быть также перечислен ticketsfiles

1.2 Мне для сайта нужны были Header 2 и Header 3, поэтому в скрипте есть плагин, добавляющий несколько тегов. Но в toolbar у меня только style-h2 style-h3, куда можно также приписать style-h1, к примеру.

NB! TinyMCE у меня инициализируется в текстовую область с классом ".cont-edit"

Добавьте следующие стили в свой файл .css, так как редактор может отображаться кривовато из-за убранных элементов:

.mce-container, .mce-container-body {overflow:hidden;}
.mce-splitbtn .mce-open {display:none;}
.mce-btn .mce-txt {font-size:18px!important;font-weight:bold;opacity:.9;}

2. Вставка в редактор TinyMCE картинки из добавленных файлов Tickets

2.1 Заходим в assets/components/tickets/js/web и открываем скрипт files.js
В самом низу будет функция на клик по ticket-file-insert и добавление файла в markItUp.
Закомментируйте или удалите этот код и вставьте этот:

tinymce.PluginManager.add('ticketsfiles', function(editor, url) {
$(document).on('click', '.ticket-file-insert', function(e) {
	var $this = $(this);
	var $parent = $this.parents('.ticket-file');
	var $text = $('.mce-content-body');
	var template = $parent.find('.ticket-file-template').html();
	template = template.replace(/^\n/g, '').replace(/\t{2}/g, '').replace(/\t$/g, '');
	$text.focus();
	editor.insertContent(template);
	return false;
});
});

Сохраняем скрипт и радуемся, так как редактор уже работает нормально

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

3.1 Нам понадобится чанк tpl.Tickets.form.image или тот, который вы вызываете в сниппете TicketForm
И добавляем под

<a href="#" class="ticket-file-insert">[[%ticket_file_insert]]</a>

строку

<a href="#" class="ticket-file-promo" style="color:grey">Сделать главной</a>

и под

<div class="ticket-file-template">
<a href="[[+url]]" title="[[+name]]" class="swipebox" rel="[[+id]]"><img src="[[+url]]" /></a>
</div>

строку

<div class="ticket-file-template-promo" style="display:none">[[+url]]</div>

3.2 Далее, если закрыли, снова открываем files.js в assets/components/tickets/js/web
и после функции, которую мы добавили в пункте 2 ставим следующий код:

$(document).on('click', '.ticket-file-promo', function(e) {
	var $this = $(this);
	var $parent = $this.parents('.ticket-file');
	var $text = $('#mainimage');
	var $bg = $('#bgpromoimg');
	var template = $parent.find('.ticket-file-template-promo').html();
	template = template.replace(/^\n/g, '').replace(/\t{2}/g, '').replace(/\t$/g, '');

	$('.ticket-file-promo').css({"color":"grey"});
	$this.css({"color":"green"});
	$text.attr('value',template);
	$bg.css('background-image', 'url(' + template + ')').css({"background-size":"cover"});
	return false;
});

Тут по идее нужно убрать лишнее и добавить нормальные addClass, а не inline стили, но у меня сайт сейчас в разработке, поэтому дизайн только предполагается.

3.3 В форме тикета должен быть скрытый input

<input type="hidden" name="item-image" id="mainimage" value="" />

а также div#bgpromoimg, в котором показывается главная картинка

NB! Не забудьте добавить в allowedFields TicketForm значение TV item-image

3.4 Так как при сохранении тикета в TV записывается неправильное значение

/assets/images/tickets/0/08adfeeb6a7870c6350e031e758551682541d375.jpg

то нам нужно вырезать assets/images/tickets/0/ и заменить 0 на ID тикета

Пример: в чанке вывода изображения тикета добавляем

[[+item-image:!empty=`<a href="[[~[[+id]]]]" class="image transition-03 smooth"><img alt="[[+pagetitle]]" src="[[pthumb? &input=`/assets/images/tickets/[[+id]][[+item-image:stripString=`/assets/images/tickets/0`]]` &options=`h=300&w=670&zc=1`]]" /></a>`]]

NB! Должен быть установлен компонент pThumb (очень быстро работает, кстати)

Вот и всё, надеюсь, кому-нибудь этот гайд поможет

p.s. не забудьте выключить редактор markItUp в конфигах tickets
p.s.s для сайтов, где нужна вставка кода, нужно добавить codesample в вызов tinymce (plugins,toolbar)

<?php
switch ($modx->event->name) {

    case 'OnDocFormSave':
        if (is_object($resource) && is_array($resource->_fields)) {
            $data = $resource->_fields;
            $resource_id = $data['id'];
            // $modx->log(1, print_r($data, 1));

            $flds = $tv_values = array();
            foreach ($data as $key => $value) {
                if ($key == 'item_image')  {
                    $tv_id = 2; // id твшки с картинкой

                    $value = trim($value);
                    $tv_value = str_replace('assets/images/tickets/0', 'assets/images/tickets/' . $resource_id, $value);
                }
                if ($key == 'content') {
                	$content = str_replace('assets/images/tickets/0', 'assets/images/tickets/' . $resource_id, $value);
                }
            }
            if (!empty($content)) {
            	$res_obj = $modx->getObject('modResource',$resource_id);
            	$res_obj->set('content', $content);
            	$res_obj->save();
            	unset($res_obj);
            }
            // пишем в таблицу modTemplateVarResource
            if (!empty($tv_value)) {
                //$modx->log(1, print_r($tv_values, 1));

                	if (!$tv_obj = $modx->getObject('modTemplateVarResource', array(
                        'tmplvarid' => $tv_id,
                        'contentid' => $resource_id,
                    ))) {
                        $tv_obj = $modx->newObject('modTemplateVarResource');
                    }

                    $tv_obj->fromArray(array(
                        'tmplvarid' => $tv_id,
                        'contentid' => $resource_id,
                        'value' => $tv_value,
                    ));
                    $tv_obj->save();
                    // $modx->log(1, print_r($tv_obj->toArray(), 1));

                    unset($tv_obj);
            }
        }
    break;
}

tinyMCE.PluginManager.add('stylebuttons'  </p>

toolbar:'undo redo | style-h2 style-h3 style-h4 bold blockquote italic underline strikethrough alignleft aligncenter | bullist numlist | link image media code visualblocks   styleselect'