Delphi.UniGUI. TinyMCE. Добавляем мощный текстовый редактор

В данной статье посмотрим как добавить текстовый редактор TinyMCE в проект UniGUI под Delphi.

Что такое TinyMCE?

Это текстовый редактор, написанный на javascript и распространяемый в качестве библиотеки. У него множество настроек, а выглядит он примерно так как на рисунке ниже.

1

Как подключить TinyMCE к обычному веб-проекту?

В принципе ничего сложного нет! Всё описано в документации. В самом простом виде это будет выглядеть так.

1 Шаг – подключение библиотеки

Через сети CDN, на примере протокола http://

Суть в том, что библиотека грузится прямо из сети, со стороннего сервера. Есть ещё вариант – скачать библиотеку и подключать её со своего сервера.

Шаг 2 – Установка и настройка текстового редактора

Если всё это проделать, то получится примерно такой результат

2

А вот чтобы получился результат как на самой первой картинке – нужно добавить массу плагинов и настроек. Об этом подробнее можно почитать в документации. Текст из данного редактора можно принимать разными способами, уже привычным PHP скриптом, как в примере здесь.

Либо, если из под UniGUI – средствами Delphi + Javascript.


Как подключить TinyMCE в UniGUI?

ШАГ 1

Создадим Standalone приложение для простоты и разместим на нём UniHTMLFrame. В свойстве HTML компонента UniHTMLFrame пропишем

ШАГ 2

Пропишем путь к библиотеке

Server Module –> CustomFiles

При этом иерархия файлов должна совпадать. Например, мой проект лежит в папке

А сама библиотека лежит в директории

Можно конечно и просто положить файл tiny_mce.js рядом с EXE, но тогда будет неудобно подключать темы библиотеки как мы делали в коде выше. В общем, экспериментируйте.

Что ещё хочу сказать – я долго мучался с тем, чтобы подключить библиотеку по инструкции, то есть так…

Пробовал и в свойстве HTML UniHTMLFrame и в AfterScript и BeforeScript. В общем много всего перепробовал, но сработало так как показано выше – видимо это ограничения самого фрэймворка или я в чем-то ещё не разобрался.

Если сделали всё правильно, то получится примерно такой результат.

1

Идем дальше, нам нужно как-то получать текст, чтобы сохранять его, скажем в БД. Можно сделать это следующим образом.

Как получить данные из TinyMCE для сохранения в БД?

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

3

Здесь нам пригодятся события Ajax в UniGUI, о которых я писал в предыдущем посте.

Кнопку Get text обработаем следующим образом – отправим Ajax запрос с клиента

Обратите внимание, здесь используется конструкция

Это функции из API библиотеки TinyMCE – там можно найти все функции и разобраться с их назначением. Здесь мы просто получаем контент самого редактора.

Далее, нам нужно написать ответ сервера на запрос Ajax

MainForm –>Events–>OnAjaxEvent

В результате получится следующая картина

4


Как отправить текст в TinyMCE?

По аналогии, используем API TinyMCE

При желании, можно “прикрутить” AjaxRequest по аналогии.

5

Исходники

TinyMCEdemo

This entry was posted in UniGui. Bookmark the permalink.