Визуальный редактор есть во всех продуктах компании Web Vortex. Он позволяет вам редактировать страницы вашего сайта без знания HTML разметки, с возможностями оформления текста, добавления изображений, таблиц, гипертекстовых ссылок, списков и других элементов страницы. Однако для сложных страниц, содержащих специальные блоки или сложную разметку, визуальный редактор может быть отключён. В этом случае вы сможете вносить корректировки через специальное поле, позволяющее редактировать непосредственно HTML разметку страницы.
По умолчанию, в настройке каждой создаваемой страницы ставится флажок «Использовать HTML-редактор». Это значит, что любой текст, который вы введете в поле «Содержимое ресурса» будет преобразован в HTML-разметку посредством предустановленного визуального редактора, и, при необходимости, опубликован на сайте. Здесь мы расскажем про все функциональные возможности данного редактора.
Визуальный редактор состоит из двух частей:
Для того, чтобы отформатировать текст, необходимо выделить нужный фрагмент текста и нажать на соответствующую кнопку:
Ссылка - это инструмент, который позволяет добавлять интерактивные гиперссылки или адреса электронной почты на вашу страницу, а также настраивать их вид и свойства (подробнее о теге <a>).
Чтобы вставить ссылку, нажмите кнопку на панели инструментов или используйте сочетание клавиш Ctrl + L.
Если вы хотите вставить ссылку, которая будет присвоена фрагменту текста, сначала выберите и выделите его.
Всплывающее диалоговое окно содержит три вкладки:
Целевая вкладка доступна только для типа ссылки «Ссылка». Она указывает место, где ссылка откроется после нажатия на нее. По умолчанию цель ссылки не установлена и ссылка откроется в том же окне браузера.
Эта вкладка содержит только один элемент: выпадающий список целей, что позволяет вам выбрать место, где ссылка откроется. Список содержит следующие опции:
Данная вкладка позволяет настроить дополнительные параметры ссылки. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает практически неограниченные возможности по настройке ссылок. Перечислим некоторые возможные параметры:
После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания ссылки нужно нажать «Отмена») и в вашем тексте должна появиться ссылка:
Для того, чтобы отредактировать параметры ссылки, необходимо выполнить на ней щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Редактировать ссылку». После этого откроется всплывающее окно, уже знакомое нам по созданию ссылки, со всеми параметрами данной ссылки.
После внесения желаемых корректировок, нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам ссылки.
Для того, чтобы измененная ссылка обновилась на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Для того, чтобы удалить ссылку, необходимо выполнить на ней щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Убрать ссылку». После этого фрагмент текста, на котором находилась ссылка, будет выглядеть как обычный текст.
Для того, чтобы изменения отобразились на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Изображения являются неотъемлемой частью современного сайта. Они позволяют «оживить» контент на сайте, а также, зачастую, несут основную информационную нагрузку. Изображения выводятся на страницу сайта с помощью тега <img> (подробнее о теге <img>).
Для того, чтобы вставить изображение в текст вашей страницы, нажмите кнопку на панели инструментов. Откроется диалоговое окно свойств, которое позволит задать параметры, определяющие исходное изображение, его размер, свойства экрана, либо другие дополнительные свойства.
Диалоговое окно «Свойства изображения» включает в себя три вкладки:
Вкладка «Данные об изображении» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить URL изображения и настроить, как оно появится в документе.
Параметры на вкладке «Данные об изображении»:
Если изображение слишком большое, вы можете изменить его размеры, введя новые значения в полях Ширина и Высота. По умолчанию сохранение пропорций изображения сохранено, об этом говорит кнопка . Это означает, что при изменении одного из значений размера (ширина или высота), другой будет корректироваться автоматически.
Если вы хотите свободно изменять размеры, нажмите кнопку блокировки - значок изменится на . Этим действием вы заблокируете соблюдение пропорций. Теперь изменение одного параметра не будет автоматически менять другой. Для блокировки сохранения пропорций изображения нажмите кнопку еще раз.
Вы можете легко вернуться к исходному размеру изображения нажатием кнопки . Это сбросит установленный размер — оригинальная ширина и высота появятся в соответствующих текстовых полях.
Вкладка «Ссылка» позволяет назначить изображению ссылку. По сути, после назначения ссылки, на изображение можно будет кликнуть и перейти по указанному адресу. Ссылка может указывать на объект любого типа, доступный в Интернете — веб-страницы, документы и т.п.
Это может оказаться особенно полезно, если, например, вы хотите добавить миниатюры, которые привели бы читателей вашего документа к полноразмерной копии изображения.
Параметры на вкладке «Ссылка»:
Работать со ссылкой на изображении можно так же, как и с обычной ссылкой.
Вкладка «Дополнительно» позволяет настроить дополнительные параметры изображения, такие как: идентификатор, подробное описание, заголовок и т.д. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает практически неограниченные возможности по представлению изображения.
Перечислим некоторые возможные параметры:
После указания всех необходимых параметров нужно нажать «ОК» (для отмены размещения изображения нужно нажать «Отмена») и в вашем тексте должно появиться желаемое изображение:
Для того, чтобы отредактировать параметры изображения, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Свойства изображения». После этого откроется всплывающее окно, уже знакомое нам по вставке изображения, со всеми параметрами данного изображения.
Также вы можете выбрать:
После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам.
Для того, чтобы отредактированное изображение обновилось на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Удалить вставленное изображение из текста можно одним из двух простых способов:
Само изображение (его файл) останется на вашем сайте в том же месте, куда вы его изначально закачали. Для полного удаления изображения его нужно удалить либо по FTP, либо через системную вкладку "Файлы"
Таблица — идеальный формат для некоторых типов данных, включая статистические данные (подробнее о таблицах). Визуальный редактор не только позволяет добавлять и редактировать таблицу быстрым и простым способом, но и предлагает расширенные возможности настройки.
Чтобы создать таблицу в визуальном редакторе, нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют размер таблицы и другие её свойства.
Диалоговое окно «Свойства таблицы» состоит из двух вкладок:
Вкладка «Свойства таблицы» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить размер таблицы и настроить её вид.
Ниже представлен обзор всех элементов на вкладке «Свойства таблицы»:
Вкладка «Дополнительно» позволяет настроить дополнительные параметры таблицы: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает почти неограниченные возможности.
Ниже представлен обзор основных элементов вкладки:
После указания всех необходимых параметров нужно нажать «ОК» (для отмены размещения таблицы нужно нажать «Отмена») и в вашем тексте должен появиться «каркас» будущей таблицы:
После вставки в документ таблица может быть изменена. Для редактирования откройте контекстное меню таблицы, щелкнув на ней правой кнопкой мыши
При выборе опции «Свойства таблицы» появится диалоговое окно. С его помощью можно изменять параметры конфигурации, которые были установлены при создании таблицы, кроме количества строк и столбцов, которые выделены серым цветом.
Кроме того, меню позволяет добавлять новые строки, столбцы или ячейки в указанных местах, а также делать слияние и разбиение ячеек.
Контекстное меню таблицы позволяет редактировать строки таблицы. Если навести курсор мыши на пункт меню «Строка», становятся доступными дополнительные возможности.
Ниже представлен обзор всех элементов меню «Строка»:
Контекстное меню таблицы позволяет редактировать столбцы таблицы. Если навести курсор мыши на пункт меню «Колонка», становятся доступными дополнительные возможности.
Ниже представлен обзор элементов меню «Колонка»:
Контекстное меню позволяет редактировать ячейки таблицы. Если навести курсор мыши на пункт меню «Ячейка», становятся доступными дополнительные возможности.
Ниже представлен обзор элементов контекстного меню «Ячейка»:
Обратите внимание, что визуальный редактор позволяет выбрать несколько ячеек таблицы с помощью мыши, так что некоторые операции могут быть применены к нескольким ячейкам сразу.
Ячейки таблицы в визуальном редакторе можно дополнительно настроить, создав уникальный внешний вид. Различные опции конфигурации могут быть установлены в диалоговом окне «Свойства ячейки», которое открывается из контекстного меню «Ячейка» таблицы.
Ниже представлен обзор элементов диалогового окна «Свойства ячейки»:
Для удаления таблицы откройте контекстное меню таблицы, щелкнув на ней правой кнопкой мыши
Чтобы удалить всю таблицу и ее содержимое, используйте опцию «Удалить таблицу».
Для структурирования информации на сайте чаще всего применяются блоки - div'ы (подробнее о теге <div>).
Визуальный редактор не только позволяет добавлять и редактировать блоки быстрым и простым способом, но и предлагает расширенные возможности их настройки.
Чтобы создать блок в визуальном редакторе, нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют его отображение и другие его свойства.
Если же вы хотите преобразовать существующий текст в блок, то перед нажатием кнопки просто выделите необходимый фрагмент текста.
Диалоговое окно «Создать Div-контейнер» состоит из двух вкладок:
Вкладка «Основное» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить основные параметры блока.
Параметры на вкладке «Основное»:
Вкладка «Дополнительно» позволяет настроить дополнительные параметры блока: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS.
Ниже представлен обзор основных элементов вкладки:
После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания блока нужно нажать «Отмена») и в вашем тексте должен появиться созданный блок. Если в блоке нет текста, то увидеть блок (его местоположение) вы можете, нажав на кнопку
Для того, чтобы отредактировать параметры блока, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Редактировать контейнер». После этого откроется всплывающее окно, уже знакомое нам по созданию Div-контейнера, со всеми параметрами данного блока.
После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам блока.
Для того, чтобы измененный контейнер обновился на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Для того, чтобы удалить блок, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Удалить контейнер». После этого блок исчезнет, а фрагмент текста, который в нем находился, останется с базовым оформлением.
Для того, чтобы изменения отобразились на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Iframe - это плавающий фрейм, который находится внутри обычной страницы, он позволяет загружать в область заданных размеров любые другие независимые страницы и документы.
Чтобы создать iframe в визуальном редакторе, нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют его отображение и другие его свойства.
Данная кнопка создаст тег <iframe> (подробнее о теге <iframe>)
Диалоговое окно «Свойства Iframe» состоит из двух вкладок:
Вкладка «Основное» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить основные параметры блока.
Параметры на вкладке «Основное»:
Вкладка «Дополнительно» позволяет настроить дополнительные параметры фрейма: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS.
Ниже представлен обзор основных элементов вкладки:
После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания фрейма нужно нажать «Отмена») и в вашем тексте должен появиться созданный фрейм.
В визуальном редакторе не предусмотрена загрузка содержимого во фрейм (в визуальном редакторе показывается только область фрейма).
Для того, чтобы посмотреть, как отображается фрейм, вам необходимо сохранить страницу и перейти на нее на вашем сайте.
Для того, чтобы отредактировать параметры фрейма, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню:
Далее нужно выбрать «Свойства iFrame». После этого откроется всплывающее окно, уже знакомое нам по созданию iFrame'а, со всеми его параметрами.
После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам фрейма.
Для того, чтобы измененный фрейм обновился на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.
Удалить вставленный фрейм из текста можно следующим способом: Выполнить щелчок левой кнопкой мыши на изображение, затем нажать на клавиатуре кнопку Delete. После этого фрейм исчезнет из визуального редактора. Следующий шаг - пересохранить страницу.
Для редактирования текста в визуальном редакторе в системе применяется продукт CKEditor (http://ckeditor.com/). Данный продукт обладает широким функционалом и богатыми возможностями настройки. На этой странице вы можете ознакомиться с руководством по использованию редактора в рамках продуктов создаваемых компанией Web Vortex. Также компания Web Vortex оставляет за собой право в любом из продуктов заменить данный визуальный редактор на любой другой или отключить использование визуального редактора. Т.к. мы всегда стремимся к лучшему функционалу наших продуктов, данное руководство может не полностью соответствовать функционалу, представленному на вашем сайте. В данном случае мы рекомендуем обратиться к вашему менеджеру для получения информации о использовании вашего визуального редактора.