Системные требования

Веб-сервер – apache 2 с включенным модулем mod_rewrite;

Версия php – 8 и выше;

Обязательные модули – mbstring, pdo, curl;

Сервер баз данных – MySQL версии 5.7 или выше;

При написании кода «Websource» использовались только нативные версии php и js, какие-либо сторонние библиотеки не использовались.

Редактор текста

Начиная с версий 0.8.345 CMS Websource в разделах: "Записи" и "Страницы", включает в себя обновленный редактор текста, который позволяет  быстро и просто наполнять страницы контентом без необходимости вводить код.

Внешний вид

Новый редактор текста

Весь редактор можно разделить на две части панель управления и поле ввода. 

Поле ввода 

Поле ввода

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

Панель управления 

2024-11-01_11-18-54

Синим цветом выделены вкладки: Форматирования, Выравнивание и Вставка. В зависимости от выбранной вкладки, ниже появляются различные действия с текстом. 

Желтым цветом выделен блок с служебными кнопками.

Служебные кнопки

служебные кнопки

Кнопки выделенные красным цветом — сделать шаг назад и шаг вперед соответственно.

Кнопка выделенная синим цветом  — посмотреть код — вызывает дополнительную панель в которой указывается путь к тегу в котором находится курсор:

Кнопка выделенная зеленным цветом — переключить режим — позволяет в реальном времени увидеть 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, кавычки и длинное тире. 

Ссылки

Кнопки для работы с ссылками

Для работы с ссылками на вкладке вставка расположены кнопки: «Вставить ссылку» и «Убрать ссылку».

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

Cоздание ссылки

После нажатие на кнопку «Вставить ссылку», появится окно вставки ссылки:

Окно вставки ссылки

В поле «ссылка», необходимо вписать URL-адрес, на который будет осуществляться переход при клике на ссылку. Если ссылка должна вести на электронную почту, необходимо кликнуть по кнопке «E-mail» и вписать адрес почтового ящика: 

ссылка на email

Если ссылка должна вести на номер телефона, необходимо кликнуть по кнопке «Телефон» и вписать номер телефона в формате +375XXXXXXXXX (начиная с символа «+» указать кол страны и код оператора и номер без пробелов/тире), на который должна переводить ссылка:

ссылка на телефон

В поле «текст ссылки», при необходимости, можно заменить текущий выделенный текст для ссылки на новый текст:

Замена текста ссылки

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

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

Вставка ссылки

После нажатие на кнопки «добавить» на месте выделение появится ссылка:

Завершение вставки ссылки

В случаях, когда наше выделение полностью входит в часть ссылки: 

2024-09-30_11-51-02

При нажатии на кнопку «Вставить ссылку» в окно вставки потянутся данные из внешней ссылки:

изменение ссылки

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

Для удаление ссылки или же ее части, необходимо выделить ее и нажать на кнопку «Убрать ссылку»:

Удаление ссылки

Изображение

Для вставки изображение, необходимо установить курсор в место в которое необходимо вставить изображение и нажать на кнопку «Вставить изображение»:

вставка изображение

Следует обратить внимание на два момента: — если выделение или курсор находится в середине блочного тега, после вставки изображение, блочный тег будет разбит на две части; — после вставки изображение, выделенный текст (если он присутствует) будет удален.

После нажатие на кнопку «Вставить изображение» появится окно с настройками вставки:

Окно вставки изображение

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

вставка логотипа

После нажатие на кнопку «Добавить», изображение будет помещено в специальный блок-обертку и добавлено в редактор:

вставили логотип

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

Разделительная линия 

Для вставки разделительной линии в текст устанавливаем курсор в нужной и нажимаем на кнопку «Разделительная линия»  

разделительная линия

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

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

После нажатие на кнопку «Разделительная линия» на месте курсора появится блок-обертка содержащий внутри себя разделительную линию. 

Плеер Youtube

Для вставки видео с Youtube, устанавливаем курсор в нужное место и нажимаем кнопку «Плеер youtube»:

вставка видео

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

После нажатие на кнопку «Плеер youtube» откроется окно:

вставка видео

В появившемся окне в поле «Код youtube» необходимо указать код нужного видео. Получить его можно следующим образом: открываем нужное видео в youtube в поле поисковика браузера видим ссылку вида: https://www.youtube.com/watch?v=code&ab_channel=channel нужный нам код будет между «watch?v=» и «&ab_channel» копируем его и вставляем в поле «Код youtube». 

Ниже можно указать ширину и/или высоту видео в пиксилях или процентах, а также выбрать как будет выравнено видео. 

вставили видео

После нажатие на кнопку «Добавить», если код видео был вставлен правильно, на месте черного квадрата будет обложка видео.

Редактирование 

Для изменение параметров вставленного видео, необходимо выбрать блок с видео и нажать на кнопку «Плеер youtube» в вкладке «Вставка», откроется окно с актуальными параметрами:

изменение видео

После нажатия кнопки «Добавить» исходное видео будет изменено.

Кавычки 

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

вставка кавычек

После нажатия на кнопку, выделенный текст будет обернут в кавычки: 

вставили ковычки

Длинное тире

Для вставки длинного тире в текст, необходимо установить курсор в нужное место и нажать на кнопку «Длинное тире»:

вставка длинного тире

После нажатия на кнопку, на месте курсора появиться длинное тире: 

вставили длинное тире

 

Оставьте заявку и мы свяжемся с вами в ближайшее время