Технология SB. Real.WYSIWYG
(Интерфейс визуального редактирования страниц)
При разработке нашего визуального редактора, мы не стали использовать различные бесплатные или платные редакторы, которыми просто завален Интернет и которыми так злоупотребляют другие разработчики.
Новый визуальный редактор CMS S. Builder представляет собой квинтэссенцию всего хорошего, доброго и удобного, из того, что Вы можете найти в других визуальных редакторах, плюс множество того, что Вы не найдете больше нигде.
У CMS S. Builder, пожалуй, самый лучший визуальный редактор среди российских CMS.
Это одна из основных "фишек" системы! То, чем по настоящему гордимся!
Сейчас мы расскажем Вам почему это так.
При редактировании контента на страницах редактор (контент-менеджер) сайта видит страницу именно в таком виде, как её видит посетитель.
Вот страница в визуальном редакторе:
и вот та же страница, как её видит посетитель сайта:
При редактировании Вы видите ту же страницу, только все блоки, которые редактор сайта может изменять, отмечаются красным пунктирным контуром.
Блок, который редактор изменяет в данный момент отмечается зеленым пунктиром.
В режиме редактирования Вы можете перемещаться по сайту так же, как это делаете всегда. Просто кликая по нужным ссылкам в тексте и меню.
Если Вы щелкните по ссылке, а такой страницы в системе нет, то она услужливо предложит Вам создать эту страницу.
Создание новой страницы в режиме визуального редактирования сводится к установке ссылки на будущую страницу (или создания нового пункта в меню). Потом просто кликаете по новой ссылке и система с вашей помощью создаст новую страницу, которую Вы тут-же сможете наполнить информацией.
При правильной настройке шаблонов заголовки, меню и все остальные блоки уже будут установлены на странице. Всё что Вам останется – это разместить нужный контент на странице (например, скопировав текст из MS Word).
Что такой механизм редактирования дает контент-менеджеру:
- Добавляя тексты, фотографии, таблицы, Вы сразу видите, как эта информация будет отображаться на странице. Как работают стили именно в этом, определенном месте, не распирает ли дизайн картинка, хорошо ли смотрится таблица и т.д.
- Вам не придется долго искать нужную информацию. Зашли на страницу, видите все данные, что расположены на ней и тут же можете отредактировать любой блок. Перешли на следующую страницу, продолжили редактирование!
- Практически отсутствуют требования к подготовке человека, ответственного за наполнение сайта. Знает MS Word? Сможет работать!
Фактически, перед Вами страница, как Вы её видите на сайте и MS Word, как Вы его видите в. в Word-е.
Чтобы войти в режим визуального редактирования страницы, достаточно просто щелкнуть по названию страницы:
Визуальный редактор позволяет выполнять множество действий.
Далеко не все мы будем здесь описывать подробно, но некоторые, особенно новые возможности, все-же опишем:
- Конечно всевозможное форматирование текста. Жирный, курсив, подчеркивание,
перечеркивание, подстрочный, надстрочный и т.д. - Позиционирование текста (выравнивание слева, справа, по центру и по ширине).
- Различного вида списки (нумерованные и маркированные).
- и т.д.
Возможностей у редактора много, все описывать не имеет смыла.
Поэтому, переходим к тому, что появилось нового:
Начнем с настройки, которую многие наши партнеры давно ждали. Тем более, что, на сколько мне известно, этого нет еще ни у кого!
Возможности, предоставляемые визуальным редактором теперь можно менять!
Вы или Вам создали красивый, стильный сайт. В котором выверено все: размер и цвет шрифта, размер фотографий, набор стилей и т.д.
И вот, показывая свою работу потенциальному клиенту, начальнику или другу Вы с гордостью показываете ему этот сайт и видите на главной странице:
Добро пожаловать на страницу
конторы ООО "Пупкин и Василий".
Знакомая ситуация? Бывает.
Не в обиду людям занимающимся редактированием контента сайта, тем более что люди бывают разные, но зачастую, лучше дать человеку меньше возможностей, чем дать больше. Много меньше. Еще меньше! А иногда убрать практически все!
Теперь Вы можете это сделать!
Какие возможности визуального редактора будут доступны контент-менеджерам, определяются в настройках системы:
Таким образом, в настройках системы администратор сайта (или разработчик) может отключить любые кнопки визуального редактора, самостоятельно определяя, какие возможности для редактирования контента будут доступны редактору сайта.
Учитывая, что разработчик сайта, в новой версии может редактировать стили (задавая им "человеческие" названия, на русском), то можно вообще отключить все возможности по форматированию текста в системе, задав набор предопределенных стилей, например:
- Текст для заголовка
- Обычный текст
- Подпись к картинкам
- и т.д.
Подробнее о возможности настройке стилей я расскажу Вам дальше.
И контент-менеджер будет делать свою работу не выходя за те рамки, которые Вы отвели ему.
Кстати! Настроить можно не только доступность иконок в редакторе но и:
- Какой тег будет вставляться при нажатии клавиши Enter (
С этим разобрались! Идем дальше.
Валидность редактора.
Теперь код, генерируемый редактором полностью XHTML-валиден.
Ну что тут еще добавить? Думаю и так все понятно.
Вставка шаблонов
В новой версии визуального редактора появились шаблоны и возможность их создавать и редактировать прямо из CMS.
Шаблоны — это предопределенные разработчиком сайта HTML-блоки, которые контент-менеджер может использовать в своей работе. Например, это могут быть заранее красиво оформленные таблицы, картинки в рамках, таблица и текст и т.д.
Делается это следующим образом:
В визуальном редакторе помещаем курсор в нужное место и нажимаем иконку "Вставить шаблон":
В открывшемся окне выбираем один из шаблонов созданных разработчиками сайта:
И получаем нужный блок кода в редакторе:
Думаю, Вам понравится.
Добавление своих стилей
Как я уже писал выше. Теперь разработчики сайта определяют, какие стили будут выводиться в визуальном редакторе!
Причем, не только определяют, но и дают им название.
Думаю, преимущества такой возможности очевидны и клиентам и разработчикам веб-сайтов.
Работа с цветом
Там, где в тексте появляется необходимость сменить цвет (текста, фона и т.д.), к Вашим услугам новое диалоговое окно а-ля Photoshop:
Теперь пользователи CMS смогут визуально выбрать любой (!) цвет из всей палитры, а не только из заданной заранее разработчиками.
Проверка орфографии
В новом визуальном редакторе нами разработана, новая, оригинальная проверка орфографии. Она не зависит от ActiveX ворда, который вечно глючит, ужасно тормозит и далеко не у всех работает. Он не зависит от установленных на сервере специальных библиотек.
Для своей работы визуальный редактор использует сервис, расположенный на нашем сервере, на котором уже установлены все необходимые библиотеки и базы. Поэтому, проверка орфографии не будет работать только, если Вы работает на локальном компьютере, на котором отсутствует соединение с Интернет. Во всех других случаях проверка орфографии будет работать!
Разрыв страниц
В визуальном редакторе появилась такая новая иконка, как разрыв страниц:
Если Вы ставите "разрыв страницы" в обычном тексте на странице, то при выводе этого текста на печать, в месте установки разрыва будет начинаться печать с новой страницы.
Но, если Вы ставите разрыв в тексте новости, статьи и т.д., то система автоматически разобьет текст на несколько страниц и построит ссылки для перехода на следующую часть статьи.
Таким образом, мы получаем автоматический механизм для разбиения длинных статей и текстов на несколько страниц.
Мы называем такой механизм пейджированием.
Еще много других возможностей
В новом редакторе появилось еще множество новых возможностей!
- Появилась возможность автоматического наложения водяного знака на загружаемые фотографии.
- Появилась возможность автоматического изменения размера загружаемых фотографий.
- Появилась возможность пакетной загрузки на сервер сразу множества различных файлов.
- Появился мастер (визард) для вставки текста из ворда. Где пользователь сам определяет на сколько сильно нужно чистить текст ворда.
- Появилась возможность вставки не только картинок и флеша, но и видео-файлов. В этом случае на странице автоматически появится интегрированный в нее проигрыватель и видео-файл можно будет проигрывать прямо на странице.
- Полностью переработан алгоритм работы с таблицами. Сейчас с таблицами в сможете сделать все что угодно, при этом, её практически невозможно сломать! Нам, по крайней мере, пока не удалось! 😉
Попробуйте серьезно поработать с таблицами в любом другом визуальном редакторе, и что называется почувствуйте разницу!
Теперь Вы можете безбоязненно редактировать текстовые блоки, у которых вперемешку с текстом "идет" JavaScript! Например счетчики.
Визуальные редакторы обычно повреждают JavaScript, до которого могут "дотянуться".
Наш редактор без проблем работает с текстом, содержащим JavaScript!
Это далеко не все возможности нашего нового редактора!
Очень надеемся, что данный текст вызвал у Вас желание самостоятельно опробовать все те возможности, что мы здесь описали, а так же открыть для себя новые, так необходимые Вам возможности.
В системе управления сайтом Ural.CMS используется визуальный редактор WYSIWYG ( с анг. What You See Is What You Get, «что видишь, то и получишь» ), который позволяет форматировать текст разделов — изменять шрифт, цвет текста, вставлять изображения, таблицы, работать с html-тегами и многое другое.
Внешний вид визуального редактора
Панель инструментов визуального редактора
Вырезать, копировать
Для того, чтобы скопировать или вырезать определенный участок текста используйте данный инструмент.
Горячие клавиши: вырезать (ctrl + x), копировать (ctrl + c)
Вставить, вставить из WORD
Если Вам необходимо вставить ранее скопированный текст, либо вставить текст непосредственно из редактора MS Word, то воспользуйтесь данными функциями.
Горячие клавиши: вставить (ctrl + v)
Редактор WYSIWYG использует для оформления текста html-теги, если Вы вставите текст из MS Word в редактор сайта, минуя специальную функцию «Вставить из Word», то редактор WYSIWYG не сможет правильно обработать Ваш текст, в связи с чем в некоторых браузерах (Internet explorer) Ваш сайт, после выполнения такой операции, будет отображаться некорретно.
Почистить код, убрать форматирование
При необходимости очистить код выбранного фрагмента, или убрать его форматирование, например, вернуть исходный цвет шрифта или его размер, используйте данную функцию.
Полужирный, курсив
Используйте данные инструменты, если Вам необходимо в тексте выделить определенные участки полужирным шрифтом или курсивом.
Горячие клавиши: полужирный (ctrl + b), курсив (ctrl + i)
Выравнивание
Данный инструмент позволяет произвести выравнивание выделенной области текста: по левому краю, по правому краю, по центру или по шрине.
Шрифт, размер шрифта
Данная функция позволяет выбрать шрифт для выделенной части текста, либо изменить его размер.
Цвет текста, фона
Используя данный инструмент Вы можете изменить цвет выделенной части текста, либо изменить фон выделенной области.
Маркированный, нумерованный список
Если Вам необходимо создать нумерованный или маркированный список, используйте данный инструмент.
Ссылки, якоря
Данный инструмент используется для создания/удаления ссылок на страницы собственного сайта, сторонние ресусры или файлы, доступные для скачивания, например, прайс-лист, анкеты и т.д.
Инструмент «Якорь» используетя для создания ссылки на определенную область внутри одной страницы.
Вставить/редактировать изображение
Если Вам необходимо разместить изображение в тексте страницы, то Вам необходимо использовать данный инструмент.
Вставить/редактировать медиа-объект
Используйте данный инструмент для размещения в тексте страницы медиа-объект, например flash-баннер
Вставить специальный символ
Функция размещения специальных символов позволяет вставить в тексте страницы, символы не доступные для ввода со стандартной клавиатуры (♣, Å, ¾ и т.д.)
Вставить горизонтальную линию
Для того, чтобы вставить в тексте страницы горизонтальную линию, используйте данную функцию.
Вставить/редактировать таблицу
Используйте данный инструмент, чтобы вставить таблицу в тексте редактируемого раздела или чтобы произвести ее редактирование, а также для изменения параметров отображения таблицы (границы, размер, фон и т.д.).
Свойства строки, ячейки
Данная функция позволяет изменять параметры отображения отдельно взятой строки или ячейки таблицы.
Вставить/удалить строку
Назначение данной функции — добавление недостающих строк снизу/сверху относительно активной строки, либо ее удаление.
Вставить/удалить столбец
Назначение данной функции — добавление недостающих столбцов слева/справа относительно активной строки, либо ее удаление.
Слить/разделить ячейки
Используйте данную функцию, если Вам необходимо слить ячейки в таблице или разделить ранее слитые.
Отменить/повторить действие
Если Вам необходимо отменить последнее действие либо его повторить, используйте данные функции.
Горячие клавиши: отменить (ctrl + z), повторить (ctrl + y)
Редактировать html-код
Использование данного инструмента позволяет редактировать html-код текущего раздела.
Полноэкранный режим
Данная функция позволяет развернуть поле редактирования текстового содержания на весь экран монитора.
Видеоурок
В системе предусмотрено использование одного HTML-редактора: CKeditor (обзор и полная документация).
Редактор CKeditor совместим с большинством популярных браузеров, и имеет больше функций, нежели стандартный редактор. К тому же он может быть встроен непосредственно в страницу редактирования информации вместо вызова его в отдельном окне для каждого поля.
Настройка редактора производится на странице: Настройки → Настройки WYSIWYG.
Страница настроек состоит из двух вкладок: настройки и панели.
Настройки
На вкладке размещены некоторые настройки. Разберём основные:
1. Оформление
Вместе с редактором поставляются три типа оформления панели инструментов.
2. Спрашивать подтверждение сохранения inline изменений
Если на сайте используется функционал inline-редактирования и установлена данная опция, по окончании редактирования будет появляться всплывающее окно.
3. Встроить редактор в поле для редактирования
При включенной опции редактор сразу будет появляться в текстовой форме, иначе над формой отобразится кнопка «Редактировать в визуальном редакторе», с помощью которой можно запустить визуальный редактор.
4. Настройка панелей
Для каждого из типов панелей настраивается свой вид отображения (вкладка «Панели»). Каждая из панелей отличается набором кнопок.
5. Настройка файла config.js
С помощью данных настроек вы можете более тонко настроить редактор под свои нужды. Ознакомьтесь с официальной документацией для получения полной информации.
Панели
На вкладке размещены ряд готовых к использованию панелей. Вы можете отредактировать уже имеющиеся панели либо добавить новые.
Инструменты панели
Редактор содержит все основные операции, которые можно производить с содержимым сайта:
- Работа со шрифтами
- Выделение жирным, наклонным, подчеркиванием
- Преобразование в надстрочный и подстрочный индекс
- Изменение семейства, размера, типа шрифта
- Изменение цвета текста и заливки
И некоторые другие полезные операции.
Форматирование содержимого происходит в интерфейсе, похожем на все известные редакторы текстов, например, Microsoft Word.
Индивидуальную панель управления можно также указать для любого поля типа «Текстовый блок».
