Все мы любим красивые сайты, особенно когда и общий дизайн красив, и текстовое наполнение, оформление списков и таблиц сделано красиво и аккуратно. Такой сайт не просто вызывает эстетическое удовольствие, но и доверие к нему намного выше.
Естественно, что на этапе дизайна и разработки, отрисовываются и верстаются всевозможные типовые элементы: списки с необычными маркерами, красивые таблицы, заголовки и так далее. Дизайнер продумывает все до мелочей, а верстальщик реализует с точностью до пикселя. И если первичное наполнение сайта материалами заказчика производится студией, то на выходе получается очень красивый и аккуратный сайт.
Но дальше начинается самое интересное.
Дальше заказчик продолжает наполнять сайт самостоятельно с помощью удобной и интуитивно понятной ЦМС, с помощью Почти-Как-Ворд редактора. И если размещать простые статьи с несколькими заголовками получается достаточно легко, то красиво оформить элементы посложней достаточно сложно, иногда для этого надо владеть как минимум базовыми навыками верстки. Неудивительно, что внешний вид сайта начинает постепенно портиться.
У разработчика возникает вопрос: а как помочь клиенту поддерживать сайт в нормальном состоянии, как сделать так, чтобы таблицы, списки и другие элементы были именно такими, как их задумал дизайнер?
Для примера приведу скриншот таблицы с характеристиками товара. Предполагается, что клиент должен сам создавать такие таблицы, когда будет заполнять сайт.
Для начала я самостоятельно попытался честно воссоздать такую же таблицу с помощью стандартного редактора (в нашей админке используется TinyMCE). Потратил полчаса и получил нечто похожее, но все же очень далекое от желаемого результата. Ниже скриншот того, как таблица выглядит в редакторе.
А вот так получилась на сайте.
Даже если я, разработчик со стажем, не смог с помощью стандартных инструментов редактора воссоздать таблицу с макета, то что же гововорить о простых пользователях. Конечно, как вариант решения можно предложить написать отдельный модуль в админке для формирования таблиц характеристик и привязки их к товарам, либо предложить техническую поддержку по наполнению сайта. Но оба варианта не устраивают по причине дороговизны.
Самое простое решение данной проблемы заключается в использовании шаблонов. Практически все существующие js-редакторы имеют такую функцию (TinyMCE и CKEditor точно). Таким образом, верстальщику/программисту нужно подготовить стили и html-код шаблонов для самых сложных и типовых элементов и встроить их в js-редактор. А клиенту останется только вставлять шаблоны и исправлять содержание.
Смотрим, как все легко получается на примере нашей таблицы.
Щелкаем по кнопке “Шаблоны”.
Из списка подготовленных шаблонов выбираем нужный и вставляем его в редактор.
Исправляем значения в таблице и сохраняем страницу.
Смотрим, что получилось на сайте. Таблица, созданная на основе шаблона, выглядит намного лучше, а времени на ее создание ушло на порядок меньше.
Вот такое простое и дешевое решение, которое должно помочь содержать все в чистоте и порядке и существенно облегчить жизнь клиентам в нелегком деле наполнения собственного сайта.
