Визуализируем управляющий шаблон: первые итоги

Как уже писалось в предыдущей статье про редактор, у меня было на выбор две идеи:

  1. Автор пишет весь шаблон на визуальном редакторе (без HTML и CSS - они генерируются редактором), и туда же втыкает структуру управляющего шаблона
  2. Автор пишет шаблон на HTML+CSS, но составляет его из кусочков в дерево шаблона (т.е. шаблон состоит из элементов, которые объединяются друг с другом с помощью переборов и условий)

Выбор пал на 2ой вариант, т.к. он менее сложный и понадобится в любом случае. Лично я на одном визуальном редакторе далеко не уеду.

И тут возникла первая сложность. Дерево шаблона будет состоять из редактируемых (!) элементов, в каждый из которых можно воткнуть кнопку-картинку. По этому пришлось иметь дело с DIV contentEditable. Т.к. мне показалось, что iframe с designmode жрал бы больше ресурсов и вообще использовать его 100 раз на одной странице как-то необосновано.

Как уже говорилось, пользователь будет писать шаблон на HTML и CSS, вставляя в него элементы управления, которых будет 3 и они будут двух типов. 1ые - делящие один элемент на несколько (условия, переборы), 2ые - вставляемые в виде кнопки посреди самого элемента (вывод переменных, функции и т.д.)

Кто сталкивался с contentEditable дивами знает через какое место ими можно управлять. В итоге было перелопачено пару сотен сайтов по этой теме. Первая цель была эмуляция Таба и замена Enter-а с <p></p>, на <br>. Таб эмулировать удалось (через \u2003), однако каретка передвигается вперёд только в IE (пробовал способов 10 эмуляции keypress, и где-то столько же способов обращения к selectionRange - не получилось). Хотя на одну позицию курсор всё таки удавалось сдвинуть, но после этого вылетал jQuery с неопределённой ошибкой. С ентером дела обстояли хуже. Перехватить его и заменить на <br> усилий не составило, а вот передвинуть туже самую злосчастную каретку так и не получилось. В итоге оставил <p></p>, но стиль у них сделал такой, чтобы были как <br>.

Следующей целью была возможность вставления подэлементов. Вначале я хотел сделать вставку элементов в элемент, но потом решил разделять родительский элемент на две части (до вставки и после вставки), а посередине вставлять подэлементы. Также как и в прошлый раз проблемма встала при работе с кареткой текста (нужно было определить её позицию). Для этого чудом нашёлся совет разработчика редактора elRight, который советовал вставлять <span> на место каретки (стандартным методом pasteHTML), а затем плясать от него. Я сделал проще - вставил на это место текст, по которому в будующем он разделялся на две части. Если часть текста была выделена - она сбрасывалась в дочерний элемент.

Как видно из скриншота, у меня готова реализация структуры шаблона. Работают кнопки "Условие", "Перебор" и "Удалить" (кстати после удаления элементы до и после удалённого места складываются в единое целое). Теперь осталось дело за реализацией окна "Параметры" и "Вставка значения". Думаю, это самый сложный технический момент. Именно в нём произойдёт интеграция редактора шаблонов с системой Е5.

Напоминаю, что смысл этого редактора - обеспечить конструирование модуля посредством нажатия нужных кнопок и выбора нужных элементов. Таким образом я приближаюсь к цели системы - создание сложных модулей вроде интернет-магазина за 10 минут с нуля. Надеюсь это будет полезно современным веб-разработчикам.

Автор: E5 Developer

Дата: 19 декабря 2012



Добавить комментарий

Имя

E-mail

Комментарий

Контрольный вопрос:
Сколько будет: 17+20-1


 
Наши работы
Массажные кровати LongLife

Благотворительная организация Преображение

Автомобили из Кореи СК-МОТОРС

Мобильные бани МОБИБА

Европейские ограждения Евростандарт

Портал недвижимости Аренда 911

Сеть саун Кантри

Строительная компания Сибирский Стиль

Автомобили из Кореи СК-МОТОРС

Арбитражный суд НСО

Сервис-кухня Ланч

Ремонт и обслуживание компьютеров ПК-Сервис

Интернет-каталог велосипедов и детской мебели Дами

 

Главная О студии Расценки Портфолио Статьи Контакты