Работа с визуальным редактором
- Панель переключения режимов редактирования.
- Стиль и форматирование текста.
- Жирный текст.
- Текст, выделенный курсивом.
- Подчеркнутый текст.
- Зачеркнутый текст.
- Сброс стилей выделенного текста.
- Цвет текста, фона текста.
- Нумерованный список.
- Ненумерованный список.
- Редактирование положения текста на странице.
- Вставка ссылки.
- Вставка видео со стороннего ресурса.
- Развернуть/свернуть редактор на весь экран.
- Развернуть панель редактора.
- Отмена действия.
- Повтор действия.
- Шрифт.
- Размер текста.
- Вставка таблицы.
- Вставка спецсимвола.
- Вставка разделителя.
- Загрузка изображения с вашего устройства.
- Загрузка текста с изображениями. Удобно при копировании текста со стороннего ресурса или текстового редактора.
- Загрузка документов ссылками.
- Очистка кода. Удаление повторяющихся абзацев и переносов строки.
- Недоступная функция.
- Нижний индекс.
- Верхний индекс.
- Недоступная функция.
- Настройки редактора.
- Панель сниппетов.
Панель переключения режимов редактирования.
Визуальный редактор может работать в двух режимах. Визуальный режим - более простой и интуитивно понятный вариант. В нем сразу видно как будут выглядеть элементы на странице. Второй вариант - режим исходного кода. Он предназначен для опытных пользователей и позволяет произвести дополнительную настройку. Также существует совмещенный режим - экран делится на две части для визуального режима и режима кода.
Соответственно на панели мы видим кнопки для переключения между этими режимами:
- режим визуального редактирования.
- режим исходного кода.
- совмещенный режим по горизонтали.
- совмещенный режим по вертикали
Стиль и форматирование текста.
С помощью выпадающего списка Стиль мы задаем стиль текста. Список предлагает нам:
- Обычный текст - формат текста по умолчанию;
- Заголовок 1-6 - Шесть вариантов заголовка, от самого большого к самому маленькому. Эти стили соответствуют html-коду <h1> - <h6>.
- Абзац (тег P) - абзац текста, соответствует html-коду <p>.
- Блок (тег DIV) - блок текста, соответствует html-коду <div>.
Жирный текст.
Текст, выделенный курсивом.
Подчеркнутый текст.
Зачеркнутый текст.
Сброс стилей выделенного текста.
Цвет текста, фона текста.
Нумерованный список.
Ненумерованный список.
Редактирование положения текста на странице.
Вставка ссылки.
Различные классы (стили) форматирования отображения ссылок можно найти здесь: Ссылки
Шаг 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 table-responsive, если хотите, чтобы она была адаптивная.
- table table-hover, чтобы включить состояние выделения строки таблицы.
- table table-sm, чтобы сделать таблицы более компактными путем уменьшения размера ячеек наполовину.
Если необходимо прописать несколько классов, то указать их, например, так:
table table-bordered table-responsive
Вставка спецсимвола.
Иногда нужно вставить в текст специальный символ. При нажатии на эту кнопку откроется таблица часто используемых символов.
Если среди них нет нужного вам, нажмите кнопку Другой спецсимвол. Откроется полная таблица спецсимволов, нажмите на символ и он появится на странице.
Вставка разделителя.
Вставляет горизонтальную полосу. Соответствует html-коду <hr>.
Загрузка изображения с вашего устройства.
1. Перетащить картинку в область
или
2. Загрузить с компьютера
Если перед загрузкой изображения установить параметр Использовать кадрирование, то после выбора изображения откроется окно редактирования.
Параметры редактора изображений:
- Придайте подходящий вид изображению, отображаемому в рабочей области 1. При этом:
- Инструменты панели 3 используйте для поворота, отражения, обрезки изображения, а также при переводе изображения в черно-белый вид и добавлении подписи.
При выполнении обрезки отображается специальная панель управления. Так, кнопка
позволяет очистить выделенную область, предназначенную для обрезки. Кнопка 
служит непосредственно для обрезки изображения согласно выбранной области, а кнопка 
определяет сохранять ли соотношение сторон при выборе обрезаемой области. Инструмент загрузки и обработки изображений доступен с версии 15.5.1. Его можно использовать для картинок анонса, детальных картинок элемента, для фотографий, загружаемых в свойство типа Файл (напр., Дополнительные фотографии) и для изображений раздела.
- Сохраняйте настройки выполняемой вами обрезки по кнопке 5, чтобы применять их в дальнейшем.
- Обрезайте изображение по вашим настройкам: в панели 4 выберите пресет и нажмите кнопку
. В рабочей области 1 сразу отобразится рамка обрезки нужного размера. Старые пресеты редактируйте по кнопке 
панели 4. - Изменяйте размеры изображения в абсолютном 6 или процентом соотношении 7.
- Не бойтесь ошибиться. Любое действие отменяется по кнопке 8.
- Инструменты панели 3 используйте для поворота, отражения, обрезки изображения, а также при переводе изображения в черно-белый вид и добавлении подписи.
- Сохраните выполненные настройки.
Для редактирования уже загруженного изображения нужно нажать правой кнопкой мыши по изображению и выбрать нужное действие.
Параметры:
1. Установить размер изображения.
2. Прописать заголовок изображения.
Дополнительные параметры:
3.Выравнивание изображения.
4. Атрибут Alt.
5. CSS-класс. Пропишите класс img-responsive, чтобы изображение адаптировалось при изменении ширины экрана устройства.
6. Пропишите адрес ссылки, если нужно перейти по какой-то ссылке при нажатии на картинку. Можно скопировать ссылку из поля Источник изображения, тогда откроется сама картинка при клике на нее. После сохранения настроек можно настроить параметры ссылки при нажатии правой кнопкой на изображение.
Загрузка текста с изображениями.
Скопируйте текст с изображениями на любом сайте и вставьте в форму. После нажатия кнопки Сохранить изображения будут скопированы на ваш сайт.
Загрузка документов ссылками.
1. Перетащить файлы в область
или
2. Загрузить с компьютера.
Очистка кода.
Удаление повторяющихся абзацев и переносов строки.
Нижний индекс.
Добавляет к тексту нижний индекс.
Верхний индекс.
Добавляет к тексту верхний индекс.
Настройки редактора.
В работе контент-менеджера возникают ситуации, когда необходимо вставить на страницу текст из другого места. Как правило, это текст из MS Word. Такой текст часто обладает собственным форматированием и его вставка может нарушить внешний вид страницы вашего сайта. Визуальный редактор обладает возможностью настроить вставку текста - выбрать какие стили оставить, а какие удалить.
Например, если отметить все опции очистки, то редактор полностью удалит форматирование исходного текста:
Обратите внимание, что в форме настроек можно включить или выключить панель сниппетов.
Панель сниппетов.
Сниппет - это заранее подготовленный фрагмент текста или кода.
Для использования сниппета просто перетащим его мышью на рабочее поле.
Добавление собственный сниппетов недоступно, но вы можете обратиться в техническую поддержку сайта с просьбой добавить определенный сниппет.
Пример форматирования текста и работы со сниппетами
Видео урок
Чтобы привести текст к одному формату с сайтом, в режиме кода можно прописать классы и модификаторы для текста, блока, области.
Для этого можно воспользоваться документацией по ссылкам: