Поле ввода текста в формате RTF

Поле ввода текста в формате RTF предназначено для ввода текстовой информации с сохранением форматирования и отображения размеченного текста, а также изображений (image).

Поле ввода текста выглядит как блок, состоящий из панели редактирования и многострочного поля ввода. Панель редактирования предназначена для форматирования содержимого основного поля ввода.

Стандартный GWT редактор

Инструменты панели редактирования:

  • Иконки для форматирования текста и списков, вставки и разрыва гиперссылки, изображения.
  • Переключатель режима ввода "Визуальный редактор /Исходный код".
  • Элементы выбора шрифта: список гарнитур, размеров и цвета.

Способы вставки изображений:

  • С помощью иконки "Вставить изображение" на панели редактирования.

  • С помощью сочетания клавиш Ctrl+V или Shift+Insert (вставка из буфера обмена).

    Если необходимо передать информацию, которая отображается на экране (снимок экрана), нажмите клавишу PrintScreen, изображение попадет в буфер обмена. Вставьте снимок экрана в поле системы.

Особенности вставки ссылок: если в поле "URL" указана ссылка без протокола, то такая ссылка будет интерпретироваться браузером как относительная и в начало ссылки будет подставляться baseurl текущей страницы, а не протокол http.

Редактор Froala

На панели инструментов редактора Froala размещаются:

  • иконки для форматирования текста, абзацев, цитат, списков, выбора гарнитур, размеров и цвета шрифта, ссылок, изображений, видео, таблиц;

  • переключатель режима ввода "Визуальный редактор /Исходный код";

    Просмотр HTML кода доступен, если количество символов в HTML коде не превышает 100000.

  • иконка "Помощь";
  • иконка разворота на весь экран;
  • иконка для вставки смайликов.

Возможность использования смайликов в тексте RTF включается в конфигурационном файле dbaccess.properties (RTF ). По умолчанию смайлики недоступны для использования.

Копирование текста и таблиц

При вставке скопированного текста и таблиц сохраняется исходное форматирование.

Чтобы вставить текст без форматирования:

  • нажмите сочетание клавиш Ctrl+Shift+V;
  • очистите форматирование, используя "ластик" на панели инструментов.

Работа с таблицами

Чтобы изменить параметры ячейки таблицы, нажмите на ячейку и в контекстном меню выберите: Заголовок таблицы, Удалить таблицу, Строка, Столбец, Ячейка, Стиль таблицы, Фон ячейки, Вертикальное выравнивание и Горизонтальное выравнивание.

Элемент "Стиль таблицы" позволяет сделать границы таблицы невидимыми.

Форматирование границ таблицы можно переопределить в стиле (режим html):

<style>
   .fr-view table.fr-table-with-borders td,
   .fr-view table.fr-table-with-borders th {
   border: 2px solid #ffffff; // параметры для границ таблицы
   }
</style>

Работа с изображениями в формате jpg, jpeg, gif, png

Чтобы изменить параметры изображения, нажмите на изображение в тексте и в контекстном меню выберите: Выровнять по, Положение, Подпись изображения, Удалить или Изменить размер.

Способы вставки изображений:

  • С помощью иконки "Вставить изображение" на панели редактирования.

  • С помощью сочетания клавиш Ctrl+V или Shift+Insert (вставка из буфера обмена).

    Если необходимо передать информацию, которая отображается на экране (снимок экрана), нажмите клавишу PrintScreen, изображение попадет в буфер обмена. Вставьте снимок экрана в поле системы.

Работа с изображениями в формате SVG не поддерживается.

Работа с видео

Чтобы изменить параметры видео, нажмите на видео в тексте и в контекстном меню выберите: Удалить, Положение, Выровнять по или Изменить размер.

Чтобы разместить видео, которое будет проигрываться непосредственно в поле RTF, используйте иконку "Вставить видео". Видео, добавленное Drag-and-drop (перетаскиванием в поле атрибута), не проигрывается.

Если добавленное видео не проигрывается, то рекомендуется применить один из следующих вариантов:

  • Добавьте видео в файлы объекта. Наведите курсор на иконку скачивания файла, правой кнопкой откройте меню и выберите "скопировать ссылку". В поле ввода текста RTF нажмите иконку "Вставить видео" и вставьте скопированную ссылку на видео.
  • В поле ввода текста RTF нажмите иконку "Вставить видео" и добавьте любое видео сервиса Youtube. Убедитесь, что добавленное видео проигрывается. Перейдите в режим HTML и замените Youtube-ссылку на требуемую.

Работа с внешними ссылками

Чтобы добавить ссылку, нажмите иконку "Вставить ссылку" и на открывшейся форме укажите значения полей "URL" и "Текст".

Чтобы редактировать ссылку, установите курсор на ссылку в тексте и нажмите иконку "Вставить ссылку", на открывшейся форме измените значения полей.

Чтобы удалить ссылку, установите курсор на ссылку в тексте и нажмите иконку "Вставить ссылку", на открывшейся форме нажмите иконку "Удалить ссылку" (в левом верхнем углу формы).

Если в поле "URL" указана ссылка без протокола, то такая ссылка будет интерпретироваться браузером как относительная и в начало ссылки будет подставляться baseurl текущей страницы, а не протокол http.

Добавление ссылки внутри текста и формирование оглавления

Чтобы оформить текст в виде статьи с оглавлением:

  1. В поле ввода текста RTF наберите текст по разделам.
  2. Перейдите в режим html, нажав иконку </> на панели управления.

  3. Выделите заголовки разделов, например:

    <h2>Заголовок раздела</h2>

  4. Для каждого заголовка раздела укажите якорь, например:

    <a name="label1"></a>

    <h2>Заголовок раздела</h2>

  5. Добавьте ссылки на якоря заголовков в начало текста для формирования оглавления. Для ссылки в оглавлении важно, чтобы target был пустой или заполнен значением "self".

    <strong>Оглавление статьи</strong>

    <a href="#label1">Ссылаемся label1</a>

    <a href="#label2">Ссылаемся label2</a>

    <br>

    <a name="label1"></a>

    <h2>Заголовок раздела 1</h2>

    <br>

    <a name="label2"></a>

    <h2>Заголовок раздела 2</h2>

  6. Сохраните изменения.

Добавление перекрестной ссылки внутри текста

Чтобы создать перекрестные ссылки внутри текста:

  1. В поле ввода текста RTF наберите текст.
  2. Перейдите в режим html, нажав иконку </> на панели управления.

  3. Поставьте якорь в месте текста, на которое необходимо сослаться:

    <a name="label1"></a> место в тексте, на который будет указывать ссылка

  4. Добавьте ссылку на якорь в нужное место текста. Для ссылки важно, чтобы target был пустой или заполнен значением "self".

    Подробное описание настройки см. <a href="#label1">Ссылка на label1</a>

  5. Сохраните изменения.

Добавление упоминания объекта

При настройке упоминания определяется какие объекты могут упоминаться и в контексте каких объектов, см. Упоминание объектов в тексте RTF.

Чтобы добавить упоминание объекта:

  • В поле ввода текста RTF введите префикс (например, "@") и начальные символы (хотя бы один) названия искомого объекта для упоминания, после этого отобразится список объектов для выбора (до ввода первого символа список пуст, отображается только название упоминания). Выберите объект для упоминания. После выбора объекта в текст вставляется гиперссылка.

  • На панели редактирования текста RTF нажмите иконку вставки уведомления и выберите объект для упоминания на форме "Упоминание объекта". После выбора объекта в текст RTF вставляется гиперссылка.

Стили форматирования текста

Форматирование текста в редакторе Froala выполняется в соответствии со стандартом HTML5. Внешний вид (шрифт, размер шрифта, цвет текста и так далее) элементов необходимо задавать с использованием стилей css (тег <style> или атрибут "style"). В стандарте HTML5 были исключены некоторые устаревшие элементы, которые использовались в HTML4, например, такие как <font>, <center>. Если в css используются устаревшие теги, то итоговый внешний вид документа может отличаться от ожидаемого.

В целях безопасности и стабильности кода использование css-классов в RTF-тексте запрещено.

Настройка работы с текстом RTF

Выбор редактора GWT или Froala