Начиная с версий 0.8.345 CMS Websource в разделах: "Записи" и "Страницы", включает в себя обновленный редактор текста, который позволяет быстро и просто наполнять страницы контентом без необходимости вводить код.
Внешний вид
Весь редактор можно разделить на две части панель управления и поле ввода.
Поле ввода
Поле ввода представляет собой блок, в который вы можете вводить текст, добавлять изображение, видео c youtube и заниматься их форматированием. При создании новой страницы или записи, изначально поле ввода содержит в себе пустой параграф. При клике на который появляется подсветка блочного тега и несколько кнопок управления блочным тегом. Кнопки выделенные красным цветом добавляют абзац до и после активного блочного тега соответственно. Кнопка справа вверху удаляет активный блок со всем его содержимым.
Панель управления
Синим цветом выделены вкладки: Форматирования, Выравнивание и Вставка. В зависимости от выбранной вкладки, ниже появляются различные действия с текстом.
Желтым цветом выделен блок с служебными кнопками.
Служебные кнопки
Кнопки выделенные красным цветом — сделать шаг назад и шаг вперед соответственно.
Кнопка выделенная синим цветом — посмотреть код — вызывает дополнительную панель в которой указывается путь к тегу в котором находится курсор:
Кнопка выделенная зеленным цветом — переключить режим — позволяет в реальном времени увидеть html структуру нашего текста.
Посмотреть код
В данном примере курсор находиться в блочном теге div и выделен курсивом (тег em). Если кнопка «посмотреть код» нажата, она становиться активна. Что б скрыть панель указывающую путь, необходимо еще раз нажать на кнопку «посмотреть код».
Переключить режим
При клике по кнопке «переключить режим» вместо поле ввода текста появляется блок содержащий html код текста введенного в поле ввода. Повторное нажатие на кнопку «переключить режим» возвращает обратно поле ввода текста.
Форматирование
Вкладка «форматирование» содержит основные инструменты для работы с текстом.
Если в поле ввода отсутствует выделенный текст и не установлен курсор, кнопки форматирования будут заблокированы. Для их разблокировки необходимо выделить текст или установить курсор в поле ввода.
Вкладка «форматирование» включает в себя настройку типа блочного тега, настройку размера шрифта и следующие кнопки: жирность, курсив, зачеркнутый, подчеркнутый, подстрочный, надстрочный , а так же кнопку для отмены примененных стилей.
Изменение типа блочного тега
Для изменение типа блочного тега необходимо кликнуть по нужному блочному тегу, затем, нажатием на выделенную красную зону, открыть список блочных тегов и выбрать необходимый. После выбора блочный тег изменит свои тип, который будет отображаться в красной зоне.
Для каждого типа блочного тега, подсветка имеет свой уникальный цвет.
Изменение размера шрифта
Если вы хотите изменить размер уже введенного текста, необходимо выделить нужный текст и в панели «форматирование» открыть выпадающий список, кликом в красную зону:
Откроется список с наиболее часто встречающемися размерами шрифта:
После выбора размера шрифта из предложенных, выделенный текст будет обернут в «span» к которому будет применен данный размер:
Кнопки форматирования
Кнопки форматирования имеют одинаковый принцип работы (за исключением кнопки «очистка форматирования», ее рассмотрим ниже), разница лишь в том, с какими тегами они работают. Кнопка «жирный» ищет теги «strong» и «b», кнопка «курсив» ищет «em» и «i», кнопка «зачеркнуть» ищет «s», кнопка «подчеркнуть» ищет «u», кнопка «нижний индекс» ищет «sub», кнопка «верхний индекс» ищет «sup». Рассмотрим работу этих кнопок на примере кнопки «жирный».
Если наше выделение находится внутри тега «strong» или «b»:
При клике на кнопку «жирность», у выделенного текста жирность будет снята.
Если выделение отсутствует и курсор стоит внутри тега «strong» или «b», при клике на кнопку «жирность», в слове в котором находится курсор жирность будет снята и выделится все слово.
В случаях если теги «strong» или «b» находятся внутри выделения:
При нажатии на кнопку «жироность» все теги «strong» и «b» будут уничтожены, а их содержимое останется на своем месте:
В случаях если выделение в тексте отсутствует, а курсор находиться в слове, часть которого входит в тег «strong» или «b»:
После нажатие на кнопку «жирность» часть слова, которая была внутри тега «strong» или «b» будет вынута из него, а все слово будет выделено:
Когда выделение не содержит внутри себя теги «strong» и «b» и не входит в них снаружи:
При нажатии на кнопку жирность выделенный текст будет помещен в тег «strong»:
В случаях когда выделение в тексте отсутствует, а курсор находиться в слове которое не содержит в себе теги «strong» и «b» и не входит в их состав:
При нажатии на кнопку «жирный» выделиться и поместиться в «strong» все слово:
По такому же принципу работают кнопки «курсив», «зачеркнуть», «подчеркнуть», «нижний индекс» и «верхний индекс».
Кнопка «очистить форматирование»
Кнопка «очистить форматирование» позволяет очистить выделенный текст от всех тегов форматирования.
Предположим, в выделенном тексте присутствует множество различных тегов форматирования:
При нажатии на кнопку «очистить форматирование» все теги форматирования, которые находятся в выделенном тексте, будут удалены, а их содержимое останется на месте:
Выравнивание
Вкладка «выравнивание» работает с активным блочным тегом и применяет стили для него. Все кнопки вкладки «выравнивание» можно разделить на три группы: кнопки выравнивания текста (выделены красным), кнопки работы с междустрочными интервалами (выделены синим) и кнопки работы с отступами (выделены желтым).
Выравнивание текста
Кнопки выравнивание текста применяют свойство text-align для активного блочного тега. Ниже представлены 4 варианта выравнивание текста:
1. По левому краю. Это значение по умолчанию для всех блочных тегов:
2. По центру. При нажатии на эту кнопку, текст в активном блочном теге будет выравнен по центру:
3. По правому краю. При нажатии на эту кнопку, текст в активном блочном теге будет выровнен по правому краю:
4. По ширине. При нажатии на эту кнопку, текст будет растянут на всю ширину активного блочного тега:
Междустрочный интервал
Значением по умолчанию и минимальным междустрочным интервалом для текста в редакторе является 140%. Для работы с междустрочным интервалом в редакторе присутствуют три кнопки: «уменьшить междустрочный интервал», «увеличить междустрочный интервал» и «сбросить междустрочный интервал».
Каждое нажатие на кнопку «увеличить междустрочный интервал» увеличивает его на 20%. В примере ниже мы увеличили интервал пять раз и он составил 240%:
Каждое нажатие на кнопку «уменьшить междустрочный интервал» уменьшает его на 20%. Установить междустрочный интервал меньше 140% невозможно. В примере ниже мы уменьшили интервал три раза, до 180% (изначальный интервал в блочном теге 240%):
Нажатие на кнопку «сбросить междустрочный интервал» устанавливает значение интервала равному значению по умолчанию — 140%:
Увеличение и уменьшение отступа.
Каждое нажатие на кнопку «увеличить отступ» увеличивает внутренний отступ блочного тега слева на 20px, соответственно каждое нажатие на кнопку «уменьшить отступ» уменьшает его на 20px.
В данном примере мы увеличили отступ два раза, до 40px:
Есть ограничение на максимальный размер отступа - 320px.
Вставка
Вкладка «вставка» содержит кнопки позволяющие вставить различные элементы, такие как: ссылки, изображения, разделительные линии, видео с youtube, кавычки и длинное тире.
Ссылки
Для работы с ссылками на вкладке вставка расположены кнопки: «Вставить ссылку» и «Убрать ссылку».
Для того что бы создать ссылку, необходимо выделить часть текста, на которую необходимо добавить ссылку, либо установить курсор на слово, которое необходимо сделать ссылкой:
После нажатие на кнопку «Вставить ссылку», появится окно вставки ссылки:
В поле «ссылка», необходимо вписать URL-адрес, на который будет осуществляться переход при клике на ссылку. Если ссылка должна вести на электронную почту, необходимо кликнуть по кнопке «E-mail» и вписать адрес почтового ящика:
Если ссылка должна вести на номер телефона, необходимо кликнуть по кнопке «Телефон» и вписать номер телефона в формате +375XXXXXXXXX (начиная с символа «+» указать кол страны и код оператора и номер без пробелов/тире), на который должна переводить ссылка:
В поле «текст ссылки», при необходимости, можно заменить текущий выделенный текст для ссылки на новый текст:
В поле «заголовок» можно указать текст, который будет появляться в виде подсказки при наведении на ссылку.
В поле «назначение» можно выбрать как будет открыта ссылка: в текущей вкладки или в новой.
После нажатие на кнопки «добавить» на месте выделение появится ссылка:
В случаях, когда наше выделение полностью входит в часть ссылки:
При нажатии на кнопку «Вставить ссылку» в окно вставки потянутся данные из внешней ссылки:
При изменение любого поле, кроме «Текст ссылки», новые параметры применятся только к выделенной части ссылки. Невыделенная часть старой ссылки останется прежней.
Для удаление ссылки или же ее части, необходимо выделить ее и нажать на кнопку «Убрать ссылку»:
Изображение
Для вставки изображение, необходимо установить курсор в место в которое необходимо вставить изображение и нажать на кнопку «Вставить изображение»:
Следует обратить внимание на два момента: — если выделение или курсор находится в середине блочного тега, после вставки изображение, блочный тег будет разбит на две части; — после вставки изображение, выделенный текст (если он присутствует) будет удален.
После нажатие на кнопку «Вставить изображение» появится окно с настройками вставки:
При нажатии на кнопку «Выбрать изображение из галереи» откроется галерея, в которой вы можете выбрать уже загруженные изображение, либо загрузить с компьютера новое изображение. После выбора поля «Ссылка на изображение» и «Заголовок» заполнятся автоматически. В поле «Заголовок» прописывается текст, который будет выводиться в случаях если по какой-то причине изображение не будет доступно. Если у вас есть ссылка на нужное изображение, вы можете в ручную вставить ее в поле «Ссылка на изображение» и заполнить поле «Заголовок». При необходимости можно указать размер изображения в пикселях или процентах, а также выбрать как будет выравнено изображение: по левому краю, по правому краю или по центру.
После нажатие на кнопку «Добавить», изображение будет помещено в специальный блок-обертку и добавлено в редактор:
Обратим внимание, что все изображение идут отдельным блоком и поместить в данный блок текст не получится. Для редактирование изображение или его замены на другое, необходимо кликнуть на блок с изображение и далее нажать на кнопку «Вставить изображение», после чего откроется окно с актуальными данными о изображении.
Разделительная линия
Для вставки разделительной линии в текст устанавливаем курсор в нужной и нажимаем на кнопку «Разделительная линия»
Обратим внимание, что вставка горизонтальной линии в середину блочного тега, также как и вставка изображении, разбивает блочный тег на две части. Так же в случаях если при нажатии на кнопку «Разделительная линия» выделение содержит какой-то текст, текст будет удален.
После нажатие на кнопку «Разделительная линия» на месте курсора появится блок-обертка содержащий внутри себя разделительную линию.
Плеер Youtube
Для вставки видео с Youtube, устанавливаем курсор в нужное место и нажимаем кнопку «Плеер youtube»:
Вставка видео работает таким же образам, как вставка изображении и горизонтальной линии: после вставки будет создан специальный блок-обертка, который разобьет активный блочный тег на две части(если выделение или курсор не находятся в начала или в конце блочного тега).
После нажатие на кнопку «Плеер youtube» откроется окно:
В появившемся окне в поле «Код youtube» необходимо указать код нужного видео. Получить его можно следующим образом: открываем нужное видео в youtube в поле поисковика браузера видим ссылку вида: https://www.youtube.com/watch?v=code&ab_channel=channel нужный нам код будет между «watch?v=» и «&ab_channel» копируем его и вставляем в поле «Код youtube».
Ниже можно указать ширину и/или высоту видео в пиксилях или процентах, а также выбрать как будет выравнено видео.
После нажатие на кнопку «Добавить», если код видео был вставлен правильно, на месте черного квадрата будет обложка видео.
Редактирование
Для изменение параметров вставленного видео, необходимо выбрать блок с видео и нажать на кнопку «Плеер youtube» в вкладке «Вставка», откроется окно с актуальными параметрами:
После нажатия кнопки «Добавить» исходное видео будет изменено.
Кавычки
Для вставки кавычек в текст необходимо выделить текст, который нужно обернуть в кавычки и нажать кнопку «Кавычки» на панели «Вставка» :
После нажатия на кнопку, выделенный текст будет обернут в кавычки:
Длинное тире
Для вставки длинного тире в текст, необходимо установить курсор в нужное место и нажать на кнопку «Длинное тире»:
После нажатия на кнопку, на месте курсора появиться длинное тире: