Как уже писалось в предыдущей статье про редактор, у меня было на выбор две идеи:
Автор пишет весь шаблон на визуальном редакторе (без HTML и CSS - они генерируются редактором), и туда же втыкает структуру управляющего шаблона
Автор пишет шаблон на 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 минут с нуля. Надеюсь это будет полезно современным веб-разработчикам.
О студии