Добавление изображений в текстовом редакторе RUEN

2009.10.25
В CMS RUEN встроен унифицированный текстовый редактор, который используется в большинстве операций по редактированию форматированного текста. Использование единого редактора обосновано удобством для пользователей и разработчика. Пользователю нет необходимости привыкать к отдельным редакторам в каждом компоненте, а разработчику, то есть мне, нет необходимости создавать редакторы для каждого компонента. Плюсом к этому имеем сокращение кода и нормальную, постоянно повышаемую функциональность, а значит, в конечном счете, мы имеем совокупный прирост производительности комплекса «разработчик + RUEN + пользователь».

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


Старый диалог добавления изображения

Новый диалог добавления изображения
А теперь по всем изменениям по очереди.

1. Справка. Диалог поддерживает добавление нескольких изображений одновременно, и в форме для первого изображения показывается краткая справка относительно формата изображения и комментария к нему. Это самые важные детали, поэтому я счел справку обязательной.
   
   
2. Комментарий. Комментарий идет в качестве подписи (если навестись на изображение, то в всплывающей подсказке будет этот самый комментарий) и он же при помощи специальной функции преобразуется в название файла изображения, поэтому об его необходимости напоминает краткая справка. И теперь комментарий можно отображать на странице под самим изображением, в этом помогает всего один установленный флажок.
   
   
3. Изображение может располагаться тремя способами: по середине страницы, либо с равнением влево или вправо, при этом текст обтекает изображение по свободной границе. То есть если изображение ставится влево, то текст обтекает его справа. Здесь никаких изменений небыло.
   
   
4. Оформление. Раньше изображение могло быть окаймлено рамкой серого цвета, в 1 пиксель шириной, и взамен этого можно было указать собственный стиль. Но последнее было доступно лишь для тех, кто знаком с HTML и CSS. К тому же игнорировались включенные в RUEN и в некоторые скины стили оформления фотографий и превьювов, это отныне исправлено – можно выбрать оформление как фотографии, так и превьюва, или вообще отключить оформление.
   
   
5. Коррекция. Изображения теперь можно корректировать при добавлении – изменять их размер. Принцип прост – задается максимальная величина ширины и/или высоты, и в эти размеры вписывается добавляемое изображение.

Кстати, если задать числа для ограничения ширины или высоты, то при вызове диалога под еще одно изображение в новом диалоге будут отображены ограничения из предыдущего. Осталось подобный эффект запоминания приспособить к расположению с оформлением и к размещению комментария. Следующий шаг – сделать так, чтобы эти параметры сохранялись и при обновлении страницы. Это тоже одна из деталей моей работы над интерфейсом, но об этом в следующий раз!

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

Следующий пост: Маленькое исследование PHP (#55, 2009.10.25)
Предыдущий пост: Общение с технической поддержкой (#53, 2009.10.24)

Пост #54. Постоянная ссылка на пост: https://exogens.ru/blog/post/dobavlenie-izobrazhenij-v-tekstovom-redaktore-ruen/