Прототипы редактора текста

Задача

Разработать редактор текста для веба, который не бесит.

Что за идея

Авторы статей на сайтах используют неповоротливые WYSIWYG-редакторы. С ними есть проблемы:

Если решить все эти проблемы в одном инструменте, получится «ПраймТекст»:

Прототип редактора

Каждый блок — это отдельная маленькая ячейка, которую можно редактировать. Параграф или элемент списка — отдельные блоки. Такие легко перетащить в другое место или поменять местами:

Заголовок можно перетащить, отредактировать или вставить что-то после него

Все блоки находятся справа, любой можно просто перетащить в нужное место. У каждого есть название, описание и иконка-превью.

Можно вставить фактоид, карту, код или такст-лист

Блоки интерактивные: так вставляется ссылка

Технические детали

Чтобы на выходе получался чистый код, редактировать можно только блоки, а не саму страницу.

На основе блоков формируется DOM-дерево: каждый блок имеет data-атрибут, который указывает, чем должен стать элемент. Вот пример:

Идея осталась прототипом: нет времени на полную реализацию.


Другие проекты