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

панель форматирования текста

Стили шаблонов сайта

При переходе к редактированию динамических элементов (например, элементов инфоблоков) в визуальном редакторе в списке шаблонов templates_panel.png будет выбран шаблон по умолчанию. Его таблица стилей (файл styles.css) будет подключена для использования для данной страницы.

Для каждого шаблона задается своя таблица стилей (файл styles.css). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.

Для каждого из стилей шаблона может быть задано название. В визуальном редакторе описанные стили выводятся идентификаторами (ID) шаблонов сайтов к которым относятся.

Примечание: Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название styles.css и содержит стили для представления внутреннего содержания страниц на сайте. Во втором – с именем template_styles.css – описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора.

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

список стилей в визуальном редакторе

Работа с заголовками

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

заголовки в визуальном редакторе

Значение Normal из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.

Таблица соответствий внешнего вида заголовка и его кода:

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>
Preformatted
<pre>Preformatted</pre>

Шрифты

В визуальном редакторе доступны следующие шрифты:

шрифты в визуальном редакторе

Для задания шрифта при редактировании в режиме кода используется такой HTML-код:

<font face="font_name"> TEXT </font>

где font_name заменяется на название выбранного шрифта из списка доступных: Times New RomanCourierArialTahoma,Verdana или Georgia.

Цвет фона текста задается по кнопке цвет фона. Выполнение действия происходит с использованием стиля для тега <font>. Например, при редактировании в режиме кода при выделении фона текста желтым цветом код будет выглядеть так:

<font style="BACKGROUND-COLOR: #ffff00">ТЕКСТ</font>

Цвет самого текста задается по кнопке цвет шрифта. Это действие выполняется помощью атрибута color тега <font>. Например, при редактировании в режиме кода при выделении текста желтым цветом код будет выглядеть так:

<font color="#3366ff">ТЕКСТ</font>


Размер шрифта

В редакторе могут быть использованы следующие размеры шрифтов:

размер шрифта в визуальном редакторе

Для задания размера шрифта при редактировании в режиме кода используется такой код:


<font size="size_number">TEXT</font>

где size_number заменяется на размер шрифта от 1 до 7. Например, в визуальной части текст medium соответствует коду: <font size="4">medium</font>

Кнопки форматирования

Рассмотрим, с помощью каких тегов реализуется различное написание текста.

КнопкаТекстТеги
Жирный<strong>Жирный</strong>
Курсив<em>Курсив</em>
Подчеркнутый<u>Подчеркнутый</u>

Кнопка удалить текстовое форматирование удаляет текстовое форматирование, т.е. удаляет тег <font> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.

Кнопка горизонтальный разделитель позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <hr>

Кнопка оптимизировать HTML Оптимизировать HTML-код убирает пустые HTML-теги.
Список убираемых пустых тегов: b, em, font, h1, h2, h3, i, li, ol, p, small, span, strong, u, ul и т.д.
В дальнейшем функционал этой кнопки будет расширяться.

Выравнивание текста


КнопкаТекстТеги
по левому краю

По левому краю

<p align="left">По левому краю</p>
по правому краю

По правому краю

<p align="right">По правому краю</p>
по центру

По центру

<p align="center">По центру</p>
по ширине

Выравниваем по ширине

<p align="justify">Выравниваем по ширине</p>

Списки элементов

В визуальном редакторе есть возможность создать два вида списков: нумерованный и маркированный. Первый вариант создается с помощью кнопки нумерованный список и выглядит так:

  1. первый
  2. второй
  3. третий

Для этого представления при редактировании в режиме кода используется следующий код:

<ol>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ol>

Второй вид, маркированный список, создается с помощью кнопки маркированный список и выглядит так:

  • первый
  • второй
  • третий

Исполняемый код такой:

<ul>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ul>

Сдвиг текста

В редакторе есть возможность увеличить отступ от края с помощью кнопки сдвиг текста вправо, а затем его можно уменьшить с помощью кнопки сдвиг текста влево. В коде при выполнении сдвига текста вправо при редактировании в режиме кода появляются следующие теги:

<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p>ТЕКСТ</p>
</blockquote>

Кнопка сдвиг текста влево сдвигает текст влево и убирает из кода тег <blockquote>

Примечание: в визуальном редакторе в области Свойства есть возможность просматривать и редактировать свойства того объекта, на котором установлен курсор мыши в данный момент. Для разных объектов набор свойств не одинаков. Например, для текста в панели Свойства представлены такие параметры:

параметры для текста


Если выделено изображение, то: 

параметры для картинки


А если выделить ссылку в рабочей области, то в Свойствах отобразится следующее: 

параметры для ссылки


Это нравится:0Да/0Нет


 Работа с текстом | Описание курса | Копирование и вставка текста