Расширенный текстовый редактор
Расширенный редактор текста является надстройкой над базовым и работает с данными в формате JSONML.
Также редактор предоставляет следующие возможности:
- Поддерживает нередактируемые цитаты;
- Поддерживает сохранение изменений в историю.
Конфигурация
Чтобы добавить расширенный редактор на страницу, необходимо выполнить следующие действия:
- Добавить контрол TextEditor/extended:Editor в шаблон страницы;
- Определить опцию 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>