О редакторе:
TinyMCE (англ. Tiny Moxiecode Content Editor) платформонезависимый Javascript HTML WYSIWYG редактор на основе Web. К основным характеристикам программы относятся поддержка тем/шаблонов, языковая поддержка и возможность подключения модулей (плагинов). Используется в различных системах управления содержимым (CMS)
Редактор позволяет очень многое. C его помощью можно вставлять рисунки, таблицы и указывать стили оформления текста. Можно выполнять операции, присутствующие в более мощных редакторах. Вдобавок к этому существует множество плагинов.
Рассмотрим подключение этого редактора на всех типах Клиента для платформы 8.3. На момент написания статьи, автор использовал версию 8.3.17 - Платформа для ПК, и версию 8.3.17.76 - мобильный клиент.
Эта статья, является продолжением и ответами на 2 вопроса, которые возникли при использовании этого редактора:
- Как использовать данный редактор в режиме Web-Клиента 1С?
- Можно ли использовать его на мобильной платформе?
И как итог всего этого: Создание универсального способа подключения редактора на любой тип Клиента 1С.
Ранее, было реализовано другими авторами:
Для Обычного Приложения - детально написано здесь [TinyMCE] - редактор HTML WYSIWYG кода.
Про Управляемые формы - тоже был сделан ПОРТ решения.
Поэтому приведу лишь краткий вариант кода, которого хватит для вывода TinyMCE в форме обработки:
Для Обычных Форм:
Процедура ПередОткрытием(Отказ, СтандартнаяОбработка)
Редактор=ПолучитьМакет("TinyMCE_zip");
ФайлАрхива=ПолучитьИмяВременногоФайла("zip");
КаталогСкриптов=КаталогВременныхФайлов();
Редактор.Записать(ФайлАрхива);
//Теперь распакуем архив сразу:
Файл = Новый Файл(КаталогСкриптов);
Если НЕ Файл.Существует() Тогда
СоздатьКаталог(КаталогСкриптов);
КонецЕсли;
//
зип = Новый ЧтениеZipФайла(ФайлАрхива);
зип.ИзвлечьВсе(КаталогСкриптов, РежимВосстановленияПутейФайловZIP.Восстанавливать);
УдалитьФайлы(ФайлАрхива);
//
ТекстНастроек = ПолучитьМакет("TinyMCE_txt").ПолучитьТекст();
Т = Новый ТекстовыйДокумент;
Т.ДобавитьСтроку(ТекстНастроек);
ВремФайл = КаталогВременныхФайлов() + "temp.html";
Т.Записать(ВремФайл);
ЭлементыФормы.ДокументHTML.Перейти(ВремФайл);
КонецПроцедуры
И выглядит оно так:
Теперь рассмотрим самый интересный вариант:
Для Управляемых Форм:
Здесь сразу разделим код на 2 типа:
- Тонкий Клиент
- Web Клиент и Мобильное приложение.
Для тонкого клиента код выглядит так:
Функция ПолучитьМакет(Макет)
Обработка=РеквизитФормыВЗначение("Объект");
Возврат Обработка.ПолучитьМакет(Макет);
КонецФункции
&НаКлиенте
Процедура ПриОткрытии(Отказ)
Редактор=ПолучитьМакет("TinyMCE_zip");
ФайлАрхива=ПолучитьИмяВременногоФайла("zip");
КаталогСкриптов=КаталогВременныхФайлов();
Редактор.Записать(ФайлАрхива);
//Теперь распакуем архив сразу:
Файл = Новый Файл(КаталогСкриптов);
Если НЕ Файл.Существует() Тогда
СоздатьКаталог(КаталогСкриптов);
КонецЕсли;
//
зип = Новый ЧтениеZipФайла(ФайлАрхива);
зип.ИзвлечьВсе(КаталогСкриптов, РежимВосстановленияПутейФайловZIP.Восстанавливать);
УдалитьФайлы(ФайлАрхива);
//
ТекстНастроек = ПолучитьМакет("TinyMCE_txt").ПолучитьТекст();
Т = Новый ТекстовыйДокумент;
Т.ДобавитьСтроку(ТекстНастроек);
//
ВремФайл = КаталогВременныхФайлов() + "temp.html";
Т.Записать(ВремФайл);
ЭтотОбъект.ДокументHTML=ВремФайл;
КонецПроцедуры
Выглядит это так:
Теперь рассмотрим вопрос по поводу Web Клиента и Мобильно клиента.
Для того,чтобы мы могли спокойно использовать редактор в этих 2-х режимах сделаем следующее:
- Сам редактор TinyMCE будем размещать на сервере.
- Инициализацию будем производить только готового документа, что упростит работу в этих режимах.
Рассмотрим настройку сервера Apache 2.4 (под которым производилась публикация базы) для решения указанной проблемы в публикации:
Alias "/tynymce" "C:/Program Files/Apache Software Foundation/Apache2.4/htdocs/tinymce"
<Directory "C:/Program Files/Apache Software Foundation/Apache2.4/htdocs/tinymce">
AllowOverride All
Options None
Require all granted
</Directory>
Здесь:
- C:/Program Files/Apache Software Foundation/Apache2.4/htdocs/tinymce - директория с редактором. Таким же образом можно реализовать и другие плагины.
- Alias "/tynymce" - добавляем путь к хосту, где публиковали базу.
Это исключает лишние вопросы, связанные с использованием данных публикации. Так как всё, что нужно - запихнуть папку tynymce, и не понадобится плодить виртуальные хосты.
Настройка Apache 2.4 аналогична используемой 1С при публикации на Web Сервере.
Для инициализации в Web Клиенте осталось дописать код таким образом:
Функция ПолучитьМакет(Макет)
Обработка=РеквизитФормыВЗначение("Объект");
Возврат Обработка.ПолучитьМакет(Макет);
КонецФункции
&НаКлиенте
Процедура ПриОткрытии(Отказ)
#Если ВебКлиент тогда
// Web Клиент - редактор на сервере:
ЭтотОбъект.ДокументHTML="http://localhost/tinymce/index.html";
#иначе
Редактор=ПолучитьМакет("TinyMCE_zip");
ФайлАрхива=ПолучитьИмяВременногоФайла("zip");
КаталогСкриптов=КаталогВременныхФайлов();
Редактор.Записать(ФайлАрхива);
//Теперь распакуем архив сразу:
Файл = Новый Файл(КаталогСкриптов);
Если НЕ Файл.Существует() Тогда
СоздатьКаталог(КаталогСкриптов);
КонецЕсли;
//
зип = Новый ЧтениеZipФайла(ФайлАрхива);
зип.ИзвлечьВсе(КаталогСкриптов, РежимВосстановленияПутейФайловZIP.Восстанавливать);
УдалитьФайлы(ФайлАрхива);
//
ТекстНастроек = ПолучитьМакет("TinyMCE_txt").ПолучитьТекст();
Т = Новый ТекстовыйДокумент;
Т.ДобавитьСтроку(ТекстНастроек);
//
ВремФайл = КаталогВременныхФайлов() + "temp.html";
Т.Записать(ВремФайл);
ЭтотОбъект.ДокументHTML=ВремФайл;
#КонецЕсли
КонецПроцедуры
Выглядит так:
Под localhost следует понимать адрес хоста в Apache, где была опубликована БАЗА.
Для Мобильного Клиента - код будет выглядеть похожим образом:
&НаКлиенте
Процедура ПриОткрытии(Отказ)
//Вставить содержимое обработчика
ЭтотОбъект.ДокументHTML="http://адрес сервера публикации/tinymce/index.html";
КонецПроцедуры
Причем, в случае последнего режима - это надо писать в код Формы Справочника, или Документа (Обработка работать отказалась на мобильном клиенте).
В эмуляторе выглядит так:
Заключение:
Приведенные способы инициализации позволяют доработать функционал HTML документа до нужного. И разумеется, следует отметить про необходимость доработки внешнего вида редактора за счет специальных стилей css для мобильной платформы и браузера.
Примечание:
Использовалась версия TinyMCE, взятая из обработке в Статье [TinyMCE] - редактор HTML WYSIWYG кода. Надеюсь, информация будет полезной.
