Работа с визуальным редактором
|
Панель переключения режимов редактирования.Визуальный редактор может работать в двух режимах. Визуальный режим - более простой и интуитивно понятный вариант. В нем сразу видно как будут выглядеть элементы на странице. Второй вариант - режим исходного кода. Он предназначен для опытных пользователей и позволяет произвести дополнительную настройку. Также существует совмещенный режим - экран делится на две части для визуального режима и режима кода. Соответственно на панели мы видим кнопки для переключения между этими режимами:
Стиль и форматирование текста.С помощью выпадающего списка Стиль мы задаем стиль текста. Список предлагает нам:
Жирный текст.
Текст, выделенный курсивом.
Подчеркнутый текст.
Зачеркнутый текст.
Сброс стилей выделенного текста.Цвет текста, фона текста. Нумерованный список. Ненумерованный список. Редактирование положения текста на странице. Вставка ссылки.
Различные классы (стили) форматирования отображения ссылок можно найти здесь: Ссылки Шаг 1. Выделить текст. Шаг 2. Нажать на значок ссылки. Шаг 3. В открывшемся окне установить нужные параметры. Вид ссылки: Документ на сервере. Если нужно разместить ссылку на страницу или документ на вашем сайте, скопируйте из адресной строки ссылку без доменного имени и вставьте ее в поле Адрес. Пример: Полный адрес ссылки: http://school.sf4obr.ru/about/ нужно скопировать только /about/ .
Ссылка на другой сайт. Если нужно разместить ссылку на страницу или документ на стороннем сайте, скопируйте из адресной строки ссылку полностью и вставьте ее в поле Адрес.
Электронный адрес. Если нужно разместить ссылку на электронный адрес, пропишите его в поле E-mail.
Дополнительные параметры: Выберите нужное значение параметра Открыть ссылку: в новом окне, родительском окне, этом окне, самом наружном.
Вставка видео со стороннего ресурса.1. Выставить ссылку на видео с ресурсов Youtube, Rutube или Vimeo. 2. Название автоматически прописывается. Его можно изменить при необходимости. 3. Выбрать размер проигрывателя видео на странице. 4. Сохранить.
Шрифт.При нажатии на параметр Шрифт откроется список с вариантами шрифтов:
Размер текста.При нажатии на параметр откроется список размеров текста.
Вставка таблицы.1. Выбрать нужное количество колонок и строк или 2. Установить детальные параметры.
Детальные параметры:
Пропишите CSS-класс таблицы:
Если необходимо прописать несколько классов, то указать их, например, так:
table table-bordered table-responsive
Вставка спецсимвола.Иногда нужно вставить в текст специальный символ. При нажатии на эту кнопку откроется таблица часто используемых символов.
Если среди них нет нужного вам, нажмите кнопку Другой спецсимвол. Откроется полная таблица спецсимволов, нажмите на символ и он появится на странице.
Вставка разделителя.Вставляет горизонтальную полосу. Соответствует html-коду <hr>.
Загрузка изображения с вашего устройства.1. Перетащить картинку в область или 2. Загрузить с компьютера
Если перед загрузкой изображения установить параметр Использовать кадрирование, то после выбора изображения откроется окно редактирования.
Параметры редактора изображений:
Для редактирования уже загруженного изображения нужно нажать правой кнопкой мыши по изображению и выбрать нужное действие.
Параметры:
1. Установить размер изображения. 2. Прописать заголовок изображения. Дополнительные параметры:
3.Выравнивание изображения. 4. Атрибут Alt. 5. CSS-класс. Пропишите класс img-responsive, чтобы изображение адаптировалось при изменении ширины экрана устройства. 6. Пропишите адрес ссылки, если нужно перейти по какой-то ссылке при нажатии на картинку. Можно скопировать ссылку из поля Источник изображения, тогда откроется сама картинка при клике на нее. После сохранения настроек можно настроить параметры ссылки при нажатии правой кнопкой на изображение.
Загрузка текста с изображениями.Скопируйте текст с изображениями на любом сайте и вставьте в форму. После нажатия кнопки Сохранить изображения будут скопированы на ваш сайт.
Удобно при копировании текста со стороннего ресурса или текстового редактора.
Загрузка документов ссылками.1. Перетащить файлы в область или 2. Загрузить с компьютера.
Очистка кода.
Удаление повторяющихся абзацев и переносов строки. Нижний индекс.
Добавляет к тексту нижний индекс.
Верхний индекс.
Добавляет к тексту верхний индекс.
Настройки редактора.В работе контент-менеджера возникают ситуации, когда необходимо вставить на страницу текст из другого места. Как правило, это текст из MS Word. Такой текст часто обладает собственным форматированием и его вставка может нарушить внешний вид страницы вашего сайта. Визуальный редактор обладает возможностью настроить вставку текста - выбрать какие стили оставить, а какие удалить.
Например, если отметить все опции очистки, то редактор полностью удалит форматирование исходного текста:
Обратите внимание, что в форме настроек можно включить или выключить панель сниппетов. Панель сниппетов.Сниппет - это заранее подготовленный фрагмент текста или кода. Для использования сниппета просто перетащим его мышью на рабочее поле. Добавление собственный сниппетов недоступно, но вы можете обратиться в техническую поддержку сайта с просьбой добавить определенный сниппет. Пример форматирования текста и работы со сниппетамиВидео урок
Чтобы привести текст к одному формату с сайтом, в режиме кода можно прописать классы и модификаторы для текста, блока, области. Для этого можно воспользоваться документацией по ссылкам: |
позволяет очистить выделенную область, предназначенную для обрезки. Кнопка 
служит непосредственно для обрезки изображения согласно выбранной области, а кнопка 
определяет сохранять ли соотношение сторон при выборе обрезаемой области. Инструмент загрузки и обработки изображений доступен с версии 15.5.1. Его можно использовать для картинок анонса, детальных картинок элемента, для фотографий, загружаемых в свойство типа Файл (напр., Дополнительные фотографии) и для изображений раздела.
. В рабочей области 
панели 
