Визуальный редактор есть во всех продуктах компании Web Vortex. Он позволяет вам редактировать страницы вашего сайта без знания HTML разметки, с возможностями оформления текста, добавления изображений, таблиц, гипертекстовых ссылок, списков и других элементов страницы. Однако для сложных страниц, содержащих специальные блоки или сложную разметку, визуальный редактор может быть отключён. В этом случае вы сможете вносить корректировки через специальное поле, позволяющее редактировать непосредственно HTML разметку страницы.

По умолчанию, в настройке каждой создаваемой страницы ставится флажок «Использовать HTML-редактор». Это значит, что любой текст, который вы введете в поле «Содержимое ресурса» будет преобразован в HTML-разметку посредством предустановленного визуального редактора, и, при необходимости, опубликован на сайте. Здесь мы расскажем про все функциональные возможности данного редактора.

Визуальный редактор состоит из двух частей:

• Панель инструментов
• Поле для ввода (редактирования) контента

Для того, чтобы отформатировать текст, необходимо выделить нужный фрагмент текста и нажать на соответствующую кнопку:

• Выравнивание текста
  • - выравнивание текста по левому краю
  • - выравнивание текста по правому краю
  • - выравнивание текста по центру
  • - выравнивание текста по ширине
• Стили текста
  • - Кнопка «Жирный». Установка жирного начертания текста
  • - Кнопка «Курсив». Установка курсивного начертания текста
  • - Кнопка «Подчеркнутый». Установка подчеркивания текста
  • - Кнопка «Зачеркнутый». Установка вычеркивания текста
  • - Кнопка «Подстрочный индекс». Преобразует текст в нижний индекс
  • - Кнопка «Надстрочный индекс». Преобразует текст в верхний индекс
  • - Кнопка «Сбросить форматирование». Сбрасывает все предыдущее форматирование выделенного текста
  • - цвет текста
  • - цвет фона
  • - стили текста, выпадающий список вариантов готового оформления текста в HTML-разметке (специфические теги оформления текста как такового)
  • - формат текста, выпадающий список вариантов оформления текста в HTML-разметке (в этом пункте, в основном, указаны варианты оформления заголовков)
• Управление текстом
  • - Кнопка «Вырезать». Вырезает выделенный текст, сохраняя его в буфер, т.е. в дальнейшем текст может быть вставлен
  • - Кнопка «Копировать». Копирует выделенный текст в буфер, в дальнейшем текст может быть вставлен
  • - Кнопка «Вставить». Вставляет на место курсора текст в том виде в котором он находится в буфере, т.е. форматирование сохраняется
  • - Кнопка «Вставить только текст». Вставляет из буфера только текстовую информацию, форматирование сбрасывается. Изображения игнорируются, ссылки заменяются простым текстом
  • - Кнопка «Вставить из Word». Этот инструмент позволяет вставить текст заранее набранный в редакторе MS Word. При этом вставленный текст очищается от лишнего «мусора»
• Структурирование текста
  • - Кнопка «Вставить/Удалить нумерованный список». Создает нумерованный (упорядоченный) список из выделенного текста
  • - Кнопка «Вставить/Удалить маркированный список». Создает маркированный (неупорядоченный) список из выделенного текста
  • - Кнопка «Уменьшить отступ». Уменьшает отступ текстового фрагмента
  • - Кнопка «Увеличить отступ». Увеличивает отступ текстового фрагмента
  • - Кнопка «Цитата». Обрамляет выделенный фрагментом тегом <blockquote>
  • - Кнопка «Вставить/Редактировать ссылку». Преобразует выделенный фрагмент текста в ссылку. Подробнее о работе со ссылками
  • - Кнопка «Убрать ссылку». Убирает ссылку с выделенного текста
  • - Кнопка «Изображение». Вставляет изображение внутрь текста. Подробнее о работе с изображениями
  • - Кнопка «Flash». Вставляет флэш-анимацию на страницу. Подробнее о работе с флэш-анимацией (документация на английском языке)
  • - Кнопка «Таблица». Вставляет таблицу в текст. Подробнее о работе с таблицами
  • - Кнопка «Вставить горизонтальную линию». Вставляет HTML-тег <hr>
  • - Кнопка «Вставить специальный символ». Предоставляет возможность выбрать специальный символ из списка и вставить его в текст
  • - Кнопка «iFrame». Вставляет в текст содержимое с других сайтов. Подробнее о работе с iFrame'ами
  • - Кнопка «Создать Div-контейнер». Создает в тексте на месте положения курсора HTML-тег <div> Подробнее о работе с Div'ами
• Сервисные кнопки
  • - Кнопка «Отменить». Отменяет последнее действие пользователя
  • - Кнопка «Повторить». Возвращает последнее отмененное действие
  • - Кнопка «Найти». Вызывает диалоговое окно поиска.
    Для поиска необходимо ввести искомые слова в поле ввода и нажать кнопку «Найти». После этого найденный текст выделится и фокус перейдет на него в окне ввода основного текста документа.
    • Пункт «Учитывать регистр». При поиске будет учитываться регистр текста
    • Пункт «Совпадение целых слов». Поиск будет производиться по ключевому слову/фразе в дословно
  • - Кнопка «Заменить». Используется для замены найденного текста другим.
    В текстовом поле «Найти:» вводится текст, который необходимо заменить, а в поле «Заменить на:» тот, на который будет заменен найденный текст.
    • Кнопка «Заменить». Производит замену по порядку, один за одним, найденный текст
    • Кнопка «Заменить все». Производится замена всего найденного текста сразу
    • Кнопка «Выделить все». Выделяет весь текст HTML-страницы (обычно используется перед копированием, удалением или применением стиля или форматирования ко всей странице)
  • - Кнопка «Развернуть». Разворачивает окно редактирования текста на весь экран
  • - Кнопка «Отображать блоки». Позволяет увидеть границы созданных Div-контейнеров
  • - Кнопка «Источник». При нажатии данной кнопки, редактор переключится в режим исходного кода.
    В этом режиме редактор отобразит содержимое страницы в HTML-разметке, что даст больше возможностей для настройки отображения содержимого.
    Этот режим рекомендуется только для опытных пользователей. Для работы с ним необходимы знания HTML и CSS.

Ссылка - это инструмент, который позволяет добавлять интерактивные гиперссылки или адреса электронной почты на вашу страницу, а также настраивать их вид и свойства (подробнее о теге <a>).

Чтобы вставить ссылку, нажмите кнопку на панели инструментов или используйте сочетание клавиш Ctrl + L.
Если вы хотите вставить ссылку, которая будет присвоена фрагменту текста, сначала выберите и выделите его.

Всплывающее диалоговое окно содержит три вкладки:

• Информация о ссылке
• Цель
• Дополнительно

• Тип ссылки - категория ссылки, которая будет вставлена в документ. Вы можете выбрать один из следующих вариантов:
  1. Ссылка - ссылка на какой-либо ресурс вне данной страницы
  2. Ссылка на якорь в тексте - внутренние ссылки, указывающие читателю на конкретный раздел на странице.
     Пример: #anchor1
  3. Электронная почта - адрес электронной почты.
     Пример: info@moi-sait.ru
• Протокол - протокол связи, который будет использоваться при переходе на указанный адрес. Вы можете выбрать один из следующих вариантов: http:// , https:// , ftp:// , news:// , или <другой>.
  Мы рекомендуем использовать протокол по умолчанию http://
  В случае, если вы добавляете ссылку на файл, лежащий на вашем сайте(или используете кнопку «Выбор на сервере»), ОБЯЗАТЕЛЬНО указывать протокол <другой>.
• Ссылка - адрес любого веб-сайта, доступного в Интернете, или отдельного документа расположенного на нем
  Пример: http://moi-sait.ru/moya-stranica.html или http://moi-sait.ru/images/my-image.jpg
• Выбор на сервере - перед вами откроется диалоговое окно, в котором вам будет предложено выбрать файл, размещенный на вашем сайте, на который будет вести данная ссылка

Целевая вкладка доступна только для типа ссылки «Ссылка». Она указывает место, где ссылка откроется после нажатия на нее. По умолчанию цель ссылки не установлена и ссылка откроется в том же окне браузера.

Эта вкладка содержит только один элемент: выпадающий список целей, что позволяет вам выбрать место, где ссылка откроется. Список содержит следующие опции:

• <не указано> - значение по умолчанию, ссылку откроется в том же окне браузера.
• <фрейм> - параметр, который позволит загрузить содержимое, доступное по ссылке, во фрейм¹⁾ с определенным именем. После того, как вы выберете такой тип цели, система предложит вам ввести имя этого фрейма.
  Данный фрейм должен существовать на текущей странице, иначе ссылка просто откроется в новом окне
• <всплывающее окно> - загрузит содержимое, доступное по ссылке, во всплывающее окно
• Новое окно (_blank) - загрузит содержимое, доступное по ссылке, в новое окно браузера
• Текущее окно (_self) - загрузит содержимое, доступное по ссылке, в текущее окно
• Родительское окно (_parent) - загрузит содержимое, доступное по ссылке, во фрейм-родитель, если фреймов нет, то это значение работает как _self.
• Главное окно (_top) - отменяет все фреймы и загружает содержимое, доступное по ссылке, в полном окне браузера, если фреймов нет, то это значение работает как _self.

Данная вкладка позволяет настроить дополнительные параметры ссылки. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает практически неограниченные возможности по настройке ссылок. Перечислим некоторые возможные параметры:

• Идентификатор — уникальный идентификатор для ссылки на странице (атрибут id)
• Класс CSS — класс ссылки (атрибут class). Обратите внимание, что ссылке может быть назначено более одного класса. Отдельные имена классов указываются через пробел
• Заголовок — текст подсказки, который отображается, когда курсор мыши находится над ссылкой (атрибут title)
• Стиль — CSS стиль (атрибут style). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой

После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания ссылки нужно нажать «Отмена») и в вашем тексте должна появиться ссылка:

Для того, чтобы отредактировать параметры ссылки, необходимо выполнить на ней щелчок правой кнопкой мыши. Откроется контекстное меню: Далее нужно выбрать «Редактировать ссылку». После этого откроется всплывающее окно, уже знакомое нам по созданию ссылки, со всеми параметрами данной ссылки. После внесения желаемых корректировок, нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам ссылки.
Для того, чтобы измененная ссылка обновилась на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Для того, чтобы удалить ссылку, необходимо выполнить на ней щелчок правой кнопкой мыши. Откроется контекстное меню: Далее нужно выбрать «Убрать ссылку». После этого фрагмент текста, на котором находилась ссылка, будет выглядеть как обычный текст.
Для того, чтобы изменения отобразились на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Изображения являются неотъемлемой частью современного сайта. Они позволяют «оживить» контент на сайте, а также, зачастую, несут основную информационную нагрузку. Изображения выводятся на страницу сайта с помощью тега <img> (подробнее о теге <img>).

Для того, чтобы вставить изображение в текст вашей страницы, нажмите кнопку на панели инструментов. Откроется диалоговое окно свойств, которое позволит задать параметры, определяющие исходное изображение, его размер, свойства экрана, либо другие дополнительные свойства.

Диалоговое окно «Свойства изображения» включает в себя три вкладки:

• Данные об изображении
• Ссылка
• Дополнительно

Вкладка «Данные об изображении» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить URL изображения и настроить, как оно появится в документе.

Параметры на вкладке «Данные об изображении»:

• Ссылка - веб-адрес изображения.
  Адрес указывается полностью, с расширением файла. Если изображение находится уже на вашем сайте, то вы можете воспользоваться кнопкой «Выбор на сервере» - откроется файловый менеджер, где вы сможете выбрать нужный файл
• Альтернативный текст — короткое текстовое описание, которое будет показываться при условии недоступности изображения
• Ширина — ширина изображения в пикселях. По умолчанию это ширина исходного изображения
• Высота — высота изображения в пикселях. По умолчанию это высота исходного изображения
• Граница — размер границ вокруг изображения в пикселях.
• Горизонтальный отступ — горизонтальные интервалы слева и справа от изображения в пикселях
• Вертикальный отступ — вертикальные интервалы сверху и снизу от изображения в пикселях
• Выравнивание — выравнивание изображения в документе. Доступные опции: по правому краю и по левому краю.
• Предпросмотр — предварительный просмотр выбранного изображения, отформатированного в соответствии с выбранными параметрами.

Если изображение слишком большое, вы можете изменить его размеры, введя новые значения в полях Ширина и Высота. По умолчанию сохранение пропорций изображения сохранено, об этом говорит кнопка . Это означает, что при изменении одного из значений размера (ширина или высота), другой будет корректироваться автоматически.

Если вы хотите свободно изменять размеры, нажмите кнопку блокировки - значок изменится на . Этим действием вы заблокируете соблюдение пропорций. Теперь изменение одного параметра не будет автоматически менять другой. Для блокировки сохранения пропорций изображения нажмите кнопку еще раз.

Вы можете легко вернуться к исходному размеру изображения нажатием кнопки . Это сбросит установленный размер — оригинальная ширина и высота появятся в соответствующих текстовых полях.

Вкладка «Ссылка» позволяет назначить изображению ссылку. По сути, после назначения ссылки, на изображение можно будет кликнуть и перейти по указанному адресу. Ссылка может указывать на объект любого типа, доступный в Интернете — веб-страницы, документы и т.п.
Это может оказаться особенно полезно, если, например, вы хотите добавить миниатюры, которые привели бы читателей вашего документа к полноразмерной копии изображения.

Параметры на вкладке «Ссылка»:

• Ссылка — адрес, который откроется при нажатии на исходное изображение. Это может быть простой адрес веб-сайта, изображения или другого файла.
• Цель — окно, в котором назначенная ссылка откроется после нажатия на изображение. Можно выбрать Новое окно ( _blank ), Главное окно ( _top ), Текущее окно ( _self ) или родительское окно ( _parent ).
  Например, чтобы при нажатии открывалось новая вкладка с большим изображением, в URL укажите адрес открывающегося изображения, в цели выберите пункт Новое окно.
  

Работать со ссылкой на изображении можно так же, как и с обычной ссылкой.

Вкладка «Дополнительно» позволяет настроить дополнительные параметры изображения, такие как: идентификатор, подробное описание, заголовок и т.д. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает практически неограниченные возможности по представлению изображения.

Перечислим некоторые возможные параметры:

• Идентификатор — уникальный идентификатор для изображения на странице (атрибут id)
• Класс CSS — класс изображения (атрибут class). Обратите внимание, что изображению может быть назначено более одного класса. Отдельные имена классов указываются через пробел
• Заголовок — текст подсказки, который отображается, когда курсор мыши находится над изображением (атрибут title)
• Стиль — CSS стиль (атрибут style). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой

После указания всех необходимых параметров нужно нажать «ОК» (для отмены размещения изображения нужно нажать «Отмена») и в вашем тексте должно появиться желаемое изображение:

Для того, чтобы отредактировать параметры изображения, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню:

Далее нужно выбрать «Свойства изображения». После этого откроется всплывающее окно, уже знакомое нам по вставке изображения, со всеми параметрами данного изображения.
Также вы можете выбрать:

• «Вырезать» - вырезать изображение с возможностью его дальнейшего размещения в другом месте на странице
• «Копировать» - копировать изображение с возможностью дальнейшего размещения его копии в другом месте на странице
• «Вставить» - вставить изображение в нужном месте на странице

После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам.
Для того, чтобы отредактированное изображение обновилось на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Удалить вставленное изображение из текста можно одним из двух простых способов:

• выполнить щелчок левой кнопкой мыши на изображение, затем нажать на клавиатуре кнопку Delete
• поставить курсор сразу после изображения и нажать на клавиатуре кнопку Backspace

Само изображение (его файл) останется на вашем сайте в том же месте, куда вы его изначально закачали. Для полного удаления изображения его нужно удалить либо по FTP, либо через системную вкладку "Файлы"

Таблица — идеальный формат для некоторых типов данных, включая статистические данные (подробнее о таблицах). Визуальный редактор не только позволяет добавлять и редактировать таблицу быстрым и простым способом, но и предлагает расширенные возможности настройки.

Чтобы создать таблицу в визуальном редакторе, нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют размер таблицы и другие её свойства.

Диалоговое окно «Свойства таблицы» состоит из двух вкладок:

• Свойства таблицы
• Дополнительно

Вкладка «Свойства таблицы» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить размер таблицы и настроить её вид.

Ниже представлен обзор всех элементов на вкладке «Свойства таблицы»:

• Строки — количество строк в таблице (обязательно).
• Колонки — количество столбцов в таблице (обязательно).
• Ширина — ширина таблицы в пикселях или процентах. Значение ширины в процентах позволяет установить долю занимаемую таблицей от области, в которой она находится (Родительский элемент).
• Высота — высота таблицы в пикселях.
• Заголовки — позволяет выбрать расположение заголовков таблицы; к ячейкам с заголовками применяется специальное форматирование.
  Можно применить следующие виды расположения заголовков:
  • Без заголовка,
  • Верхняя строка,
  • Левая колонка,
  • Сверху и слева.
• Размер границ — толщина границы таблицы в пикселях.
• Выравнивание — выравнивание таблицы на странице.
  Доступны следующие варианты:
  • Не указано,
  • По левому краю,
  • По центру,
  • По правому краю.
• Внешний отступ ячеек — пространство между отдельными ячейками в пикселях.
• Внутренний отступ ячеек — расстояние между границей ячейки и ее содержимым в пикселях.
• Заголовок — метка таблицы, которая отображается в верхней части.
• Итоги — краткое изложение содержания таблицы, которое доступно для вспомогательных устройств, таких как программа чтения с экрана. Это хорошая практика предоставления таблиц с осмысленным текстом для того, чтобы сделать его более доступным для пользователей с ограниченными возможностями.

Вкладка «Дополнительно» позволяет настроить дополнительные параметры таблицы: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает почти неограниченные возможности.

Ниже представлен обзор основных элементов вкладки:

• Идентификатор — уникальный идентификатор для таблицы на странице (атрибут id).
• Направление текста — направление текста в таблице: слева направо (LTR) или справа налево (RTL) (атрибут dir).
• Классы CSS — класс элемента таблицы (атрибут class). Обратите внимание, что таблице может быть назначено более одного класса. Отдельные имена классов указываются через пробел
• Стиль — CSS стили (атрибут style). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой

После указания всех необходимых параметров нужно нажать «ОК» (для отмены размещения таблицы нужно нажать «Отмена») и в вашем тексте должен появиться «каркас» будущей таблицы:

После вставки в документ таблица может быть изменена. Для редактирования откройте контекстное меню таблицы, щелкнув на ней правой кнопкой мыши

При выборе опции «Свойства таблицы» появится диалоговое окно. С его помощью можно изменять параметры конфигурации, которые были установлены при создании таблицы, кроме количества строк и столбцов, которые выделены серым цветом.

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

Контекстное меню таблицы позволяет редактировать строки таблицы. Если навести курсор мыши на пункт меню «Строка», становятся доступными дополнительные возможности.

Ниже представлен обзор всех элементов меню «Строка»:

• Вставить строку сверху — вставляет новую строку перед той, в которой находится курсор
• Вставить строку снизу — вставляет новую строку после той, в которой находится курсор
• Удалить строки — удаляет строку, в которой находится курсор

Контекстное меню таблицы позволяет редактировать столбцы таблицы. Если навести курсор мыши на пункт меню «Колонка», становятся доступными дополнительные возможности.

Ниже представлен обзор элементов меню «Колонка»:

• Вставить колонку слева — вставляет новый столбец перед тем, в котором находится курсор
• Вставить колонку справа — вставляет новый столбец после того, в котором находится курсор
• Удалить колонки — удаляет столбец, в котором находится курсор

Контекстное меню позволяет редактировать ячейки таблицы. Если навести курсор мыши на пункт меню «Ячейка», становятся доступными дополнительные возможности.

Ниже представлен обзор элементов контекстного меню «Ячейка»:

• Вставьте ячейку слева — вставляет новую ячейку до той, в которой находится курсор
• Вставьте ячейку справа — вставляет новую ячейку после той, в которой находится курсор
• Удалить ячейки — удаляет ячейку, в которой находится курсор
• Объединить ячейки — слияние нескольких ячеек в одну. Эта опция доступна только если две или больше клеток будут выделены
• Объединить с правой — слияние выбранной ячейки с ячейкой справа от нее. Эта опция доступна только, если выделено не более одной ячейки
• Объединить с нижней — слияние выбранной ячейки с ячейкой, расположенной нод ней. Эта опция доступна только, если выделено не более одной ячейки
• Разделить ячейку по горизонтали — разделяет выбранную ячейку на две части, создав новую ячейку справа от нее. Содержимое ячейки помещается в левую ячейку. Эта опция доступна, если выделено не более одной ячейки
• Разделить ячейку по вертикали — разбивает выбранную ячейку на две части, создав новую ячейку под ней. Содержимое ячейки помещается в верхнюю ячейку. Эта опция доступна, если выделено не более одной ячейки
• Свойства ячейки — открывает Свойства ячейки, позволяет настроить размер ячейки, тип, цвет фона и границ, определить выравнивание

Обратите внимание, что визуальный редактор позволяет выбрать несколько ячеек таблицы с помощью мыши, так что некоторые операции могут быть применены к нескольким ячейкам сразу.

Ячейки таблицы в визуальном редакторе можно дополнительно настроить, создав уникальный внешний вид. Различные опции конфигурации могут быть установлены в диалоговом окне «Свойства ячейки», которое открывается из контекстного меню «Ячейка» таблицы.

Ниже представлен обзор элементов диалогового окна «Свойства ячейки»:

• Ширина — ширина ячейки в пикселях или процентах. Значение ширины в процентах позволяет установить, какую долю строки ячейка (колонка, в которой она расположена) будет занимать
• Высота — высота ячейки в пикселях
• Тип ячейки — нормальная ячейка с данными или ячейка заголовка со специальным форматированием
• Перенос по словам — этот параметр включает/выключает перенос слов в содержимом ячейки
• Объединяет строк — устанавливает число ячеек, которые должны быть объединены по вертикали. Ввод числового значения (целое положительное число больше 1) атрибута rowspan
• Объединяет колонок — устанавливает число ячеек, которые должны быть объединены по горизонтали. Ввод числового значения (целое положительное число больше 1) атрибута colspan
• Горизонтальное выравнивание — выравнивание содержимого ячейки таблицы по горизонтали. Доступны следующие варианты: по левому краю, по центру, по правому краю
• Вертикальное выравнивание — выравнивание содержимого ячейки таблицы по вертикали. Доступны следующие варианты: по верху, по середине, по низу, по базовой линии
• Цвет фона — цвет фона ячейки. Вы можете использовать любой из следующих методов, чтобы установить цвет:
  • Введите RGB значение в текстовое поле, в формате rgb(nn , nn , nn), где nn является числовым значением по шкале от 0 до 255 и представляет красный, зеленый и синий каналы
  • Введите шестнадцатеричное значение RGB в текстовое поле, в формате #nnnnnn, где буквы n обозначают три пары шестнадцатеричных значений цвета - красный, зеленый и синий канал
  • Используйте кнопку «Выберите», чтобы открыть диалоговое окно выбора цвета и выбрать цвет с помощью мыши
• Цвет границ — цвет границы ячейки. Вы можете использовать любой из следующих методов, чтобы установить цвет:
  • Введите RGB значение в текстовое поле, в формате rgb( nn , nn , nn ), где nn является числовым значением по шкале от 0 до 255 представляют красный, зеленый и синий канал
  • Введите шестнадцатеричное значение RGB в текстовое поле, в # nnnnnn формате, где n буквы обозначают три пары шестнадцатеричных значений цвета — красный, зеленый и синий канал
  • Используйте кнопку «Выберите», чтобы открыть диалоговое окно выбора цвета и выбрать цвет с помощью мыши

Для удаления таблицы откройте контекстное меню таблицы, щелкнув на ней правой кнопкой мыши

Чтобы удалить всю таблицу и ее содержимое, используйте опцию «Удалить таблицу».

Для структурирования информации на сайте чаще всего применяются блоки - div'ы (подробнее о теге <div>).
Визуальный редактор не только позволяет добавлять и редактировать блоки быстрым и простым способом, но и предлагает расширенные возможности их настройки.

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

Диалоговое окно «Создать Div-контейнер» состоит из двух вкладок:

• Основное
• Дополнительно

Вкладка «Основное» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить основные параметры блока.

Параметры на вкладке «Основное»:

• Стиль - вариант стилевого оформления блока. Имеет два варианта:
  • не указано - блок будет создан без стиля оформления
  • Special Container - параметр, который назначит вашему блоку заранее подготовленный стиль оформления: серый фон, серые границы, отступы внутри блока (5 пикселей сверху и снизу, 10 пикселей слева и справа)
• Класс CSS - класс блока (атрибут class). Обратите внимание, что блоку может быть назначено более одного класса. Отдельные имена классов указываются через пробел

Вкладка «Дополнительно» позволяет настроить дополнительные параметры блока: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS.

Ниже представлен обзор основных элементов вкладки:

• Идентификатор — уникальный идентификатор для блока на странице (атрибут id).
• Направление текста — направление текста в таблице: слева направо (LTR) или справа налево (RTL) (атрибут dir).
• Стиль — CSS стили (атрибут style). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой

После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания блока нужно нажать «Отмена») и в вашем тексте должен появиться созданный блок. Если в блоке нет текста, то увидеть блок (его местоположение) вы можете, нажав на кнопку

Для того, чтобы отредактировать параметры блока, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню: Далее нужно выбрать «Редактировать контейнер». После этого откроется всплывающее окно, уже знакомое нам по созданию Div-контейнера, со всеми параметрами данного блока. После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам блока.
Для того, чтобы измененный контейнер обновился на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Для того, чтобы удалить блок, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню: Далее нужно выбрать «Удалить контейнер». После этого блок исчезнет, а фрагмент текста, который в нем находился, останется с базовым оформлением.
Для того, чтобы изменения отобразились на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Iframe - это плавающий фрейм, который находится внутри обычной страницы, он позволяет загружать в область заданных размеров любые другие независимые страницы и документы.

Чтобы создать iframe в визуальном редакторе, нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют его отображение и другие его свойства.
Данная кнопка создаст тег <iframe> (подробнее о теге <iframe>)

Диалоговое окно «Свойства Iframe» состоит из двух вкладок:

• Основное
• Дополнительно

Вкладка «Основное» является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить основные параметры блока.

Параметры на вкладке «Основное»:

• Ссылка - ссылка на какой-либо ресурс вне данной страницы (полный URL)
• Ширина - ширина фрейма в пикселях
• Высота - высота фрейма в пикселях
• Выравнивание - выравнивание фрейма по горизонтали и вертикали. Доступные параметры: <не указано>, по левому краю, по правому краю, поверху, посередине, понизу.
• Отображать полосы прокрутки - показывать ли полосы прокрутки, если размер вставляемого содержимого превышает указанные размеры фрейма.
• Показать границы фрейма - показывать или нет границы области фрейма
• Имя - имя фрейма (атрибут name)
• Заголовок - заголовок фрейма (атрибут title)

Вкладка «Дополнительно» позволяет настроить дополнительные параметры фрейма: присвоить идентификатор, указать направление текста или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS.

Ниже представлен обзор основных элементов вкладки:

• Идентификатор — уникальный идентификатор для фрейма на странице (атрибут id)
• Стиль — CSS стили (атрибут style). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой
• CSS классы - класс блока (атрибут class). Обратите внимание, что блоку может быть назначено более одного класса. Отдельные имена классов указываются через пробел

После указания всех необходимых параметров нужно нажать «ОК» (для отмены создания фрейма нужно нажать «Отмена») и в вашем тексте должен появиться созданный фрейм. В визуальном редакторе не предусмотрена загрузка содержимого во фрейм (в визуальном редакторе показывается только область фрейма).
Для того, чтобы посмотреть, как отображается фрейм, вам необходимо сохранить страницу и перейти на нее на вашем сайте.

Для того, чтобы отредактировать параметры фрейма, необходимо выполнить на нем щелчок правой кнопкой мыши. Откроется контекстное меню: Далее нужно выбрать «Свойства iFrame». После этого откроется всплывающее окно, уже знакомое нам по созданию iFrame'а, со всеми его параметрами.

После внесения желаемых корректировок нужно нажать либо «Ок» для сохранения изменений, либо «Отмена» для возвращения к исходным параметрам фрейма.
Для того, чтобы измененный фрейм обновился на сайте, нужно сохранить страницу, нажав «Сохранить» в верхнем меню, либо нажав Ctrl + S.

Удалить вставленный фрейм из текста можно следующим способом: Выполнить щелчок левой кнопкой мыши на изображение, затем нажать на клавиатуре кнопку Delete. После этого фрейм исчезнет из визуального редактора. Следующий шаг - пересохранить страницу.

Для редактирования текста в визуальном редакторе в системе применяется продукт CKEditor (http://ckeditor.com/). Данный продукт обладает широким функционалом и богатыми возможностями настройки. На этой странице вы можете ознакомиться с руководством по использованию редактора в рамках продуктов создаваемых компанией Web Vortex. Также компания Web Vortex оставляет за собой право в любом из продуктов заменить данный визуальный редактор на любой другой или отключить использование визуального редактора. Т.к. мы всегда стремимся к лучшему функционалу наших продуктов, данное руководство может не полностью соответствовать функционалу, представленному на вашем сайте. В данном случае мы рекомендуем обратиться к вашему менеджеру для получения информации о использовании вашего визуального редактора.