С каждым годом увеличивается число приложений, использующих возможность редактирования текста со сложным форматированием. Можно даже сказать, что если приложение, имея привлекательный интерактивный интерфейс, вдруг предоставляет пользователю обычный элемент textarea (пусть даже диджит Textarea), это будет восприниматься, по меньшей мере, как нечто неестественное. К счастью, диджит Editor обладает типичной функциональностью по редактированию текста со сложным форматированием, а его использование не требует от вас приложения чрезмерных усилий.
Инструментарий Dojo опирается на использование элементов управления, реализованных в самом броузере, позволяющих редактировать содержимое. В качестве короткого экскурса в историю: в Internet Explorer 4.0 была реализована концепция режима разработки (designmode), в котором стало возможным редактировать текст способом, напоминающим простой редактор текста со сложным форматированием. Вслед за Microsoft в Mozilla 1.3 был также реализован практически идентичный прикладной программный интерфейс, который в конечном итоге был формализован в виде спецификации Midas Specification (
http://www.mozilla.org/editor/midas!spec.html). Другие броузеры тоже последовали в этом направлении, хотя и с некоторыми незначительными отклонениями. В любом случае, самое тяжелое – это сначала сделать документ редактируемым, а потом вызвать JavaScript -функцию execCommand, чтобы создать фактическую разметку. Следуя спецификации Midas Specification, поставленную задачу могли бы решить следующие строки программного кода:
// Сделать узел редактируемым... это может быть div с установленной
// шириной и высотой
document.getElementById("foo").contentDocument.designMode="on";
/* Выделить некоторый текст... */
// Придать выделенному тексту курсивное начертание.
// Никаких дополнительных аргументов не требуется.
editableDocument.execCommand("Italic", false, null);
Представьте теперь, что мы могли бы использовать весь арсенал команд манипулирования содержимым с помощью функции execCommand, стандартизовать различия между броузерами, скомпоновать удобную инструментальную панель, добавить привлекательную стилизацию и оформить все это в виде переносимого виджета. В действительности именно это и делает диджит Editor из библиотеки Dijit. Виджет Editor обеспечивает очень большое разнообразие возможностей, среди которых некоторые на первый взгляд могут показаться лишними, тем не менее освоить базовый набор возможностей совсем несложно. В примере 15.12 демонстрируется использование виджета Editor в разметке – с применением простого стиля и парой кнопок для взаимодействия с ним.
Пример 15.12. Пример типичного использования диджита Editor
<div style="margin:5px;background:#eee; height: 400px; width:525px">
<div id="editor" height="375px" dojoType="dijit.Editor">
When shall we three meet again?
In thunder, lightning, or in rain?
</div>
</div>
(button dojoType="dijit.form.Button")Save
<script type="dojo/method" event="onClick" args="evt">
/* Сохраните содержимое редактора любым способом по вашему выбору */
console.log(dijit.byId("editor").getValue());
</script>
(/button)
(button dojoType="dijit.form.Button")Clear
<script type="dojo/method" event="onClick" args="evt">
dijit.byId("editor").replaceValue("");
</script>
(/button)
Вам определенно стоит потратить некоторое время, чтобы поэкспериментировать с диджитом Editor и самим убедиться в возможности использовать все его функциональные возможности при очень незначительных усилиях, без чего будет трудно поверить, что это правда. Обратите внимание, что Editor отображает простую разметку HTML, поэтому при сохранении и восстановлении содержимого не придется выполнять промежуточное преобразование.