Расширенный текстовый редактор

Расширенный редактор текста является надстройкой над базовым и работает с данными в формате JSONML.

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

1. Поддерживает нередактируемые цитаты;
2. Поддерживает сохранение изменений в историю.

Конфигурация

Чтобы добавить расширенный редактор на страницу, необходимо выполнить следующие действия:

1. Добавить контрол TextEditor/extended:Editor в шаблон страницы;
2. Определить опцию value в формате JSONML.

<!-- WML -->
<TextEditor.extended:Editor
    value="{{_value}}" />

protected _value = [
    ['p', 'Разнообразный и богатый опыт говорит нам, что начало повседневной работы по формированию позиции предполагает независимые способы реализации кластеризации усилий. Господа, граница обучения кадров требует определения и уточнения новых принципов формирования материально-технической и кадровой базы. А ещё независимые государства могут быть функционально разнесены на независимые элементы.'],
]

Панель стилей

В комплекте с расширенным редактором поставляется панель стилей и кнопка, которая эту панель открывает - TextEditor/extended:StylesButton. Панель стилей представляет из себя набор кнопок, каждая из которых отвечает за определенный стиль текста. Для отслеживания применения стиля через панель необходимо подписаться на событие stylesChanged у кнопки вызова панели.

В примере ниже свяжем редактор с кнопкой вызова панели стилей:

<!-- WML -->
<TextEditor.extended:Editor
   onActiveStylesChanged="{{_onActiveStylesChangedHandler}}"
   bind:value="_value" />

<TextEditor.extended:StylesButton
   on:stylesChanged="_panelStylesChangedHandler()"/>

// TypeScript
// ...

// Подпишемся на изменение активного стиля в редакторе.
protected _onActiveStylesChangedHandler = (styles: IStyles) => {
    this._activeStyles = styles;
}

// Подпишемся на применение стиля в панели.
protected _panelStylesChangedHandler(event: Event, style: IStyle): void {
    this._children.editor.applyStyle(style);
}

История ввода

Расширенный редактор умеет сохранять введенный контент при потере фокуса. Для того, чтобы логика сохранения работала, необходимо задать идентификатор истории через опцию historyId.

В примере ниже определим идентификатор поля в хранилище и опишем контрол отображения истории:

<!-- WML -->
<TextEditor.extended:Editor
   historyId="testId"
   bind:value="_value" />

<table>
   <tbody>
      <ws:for data="key, line in _historyLines">
         <tr>
            <td>
               <button on:click="_applyHistory(line.value)">применить</button>
            </td>
            <td>
               <div class="ws-ellipsis" title="{{line.text}}">
                  <Controls.decorator:Markup value="{{line.value}}" />
               </div>
            </td>
         </tr>
      </ws:for>
   </tbody>
</table>

// TypeScript
// ...

// Подпишемся на изменение активного стиля в редакторе.
protected _applyHistory = (item) => {
    this._children.editor.applyHistory(item.get('value'));
}

// ...

Область внизу редактора

Редактор предоставляет возможность отобразить пользовательский шаблон в нижней части с помощью контентной опции footerTemplate.

В примере ниже опишем шаблон с кнопкой:

<!-- WML -->
<TextEditor.extended:Editor
   bind:value="_value">
   <ws:footerTemplate>
      <Controls.buttons:Button
         viewMode="link"
         caption="Прикрепить"
         iconSize="s"
         icon="icon-Attach" />
   </ws:footerTemplate>
</TextEditor.extended:Editor>

Справочные материалы и ресурсы

• API