Skip to content
Concrete5 на русском языке

Редактор

Стандартные редакторы WYSIWYG в concrete5 это Redactor (версия 7) и CKEditor (версия 8)

CKEditor


CKEditor это готовый к использованию текстовый редактор HTML сделанный для упрощения создания веб контента.

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

Верхний ряд

  • Левые кнопки

    • Исходник  (нажмите, чтобы увидеть и отредактироватьt html код)
    • Сохранить (сохраняет текущие изменения в редакторе на странице: не сохраняет страницу)
    • Отмена (отменяет все текущие изменения и выводит блок плагина из режима редактирования)
  • Правые кнопки

    • (удаляет  выделенные элементы и помещает их в память)
    • Копировать (листы) (копирует выделенные элементы в память, но не удаляет их)
    • Вставить (вставляет текущий контент из памяти в текст, туда где находится курсор)
    • Стрелка влево (отменяет самую последнюю команду)
    • Стрелка вправо (заново выполняет самую последнюю команду, которая была отменена)

Второй ряд

  • Левые кнопки

    • Bold  (делает выбранный текст толще добавляя HTML теги <strong></strong>)
    • Italic (делает выбранный текст наклонным <em></em>)
    • Underline (подчеркивает набранный текст добавляя теги <u></u>)
    • Strikethrough (перечеркивает выделенный текст добавляя теги <s></s>)
    • x2(понижает и уменьшает размер выбранного текста добавлением <sub></sub>)
    • (поднимает и уменьшает размер выбранного текста добавляя <sup></sup>)
    • Убрать форматирование (удаляет форматирующие теги вокруг выбранных элементов)
  • Следующие кнопки

    • Вставляет/Удаляет нумерованный список (Меняет список, в котором каждый элемент начинается с номера, используя теги <ol></ol>)
    • Вставить/Удалить Маркированный Список (Изменяет представление списка добавляя точки слева используя теги <ul></ul>)
    • Уменьшает Отступ (добавляет -40px отступ к выбранному элементу - слева или справа в зависимости от направления письма)
    • Увеличивает Отступ (добавляет отступ в +40px к выбранному элементу - слева или справа, в зависимости от направления письма)
    • По левому краю (выравнивает по левому краю выбранный элемент добавляя style="text-align:left")
    • По центру (центрирует выбранные элементы добавляя  style="text-align:center")
    • По правому краю (выравнивает выбранные элементы по правому краю добавляя:  style="text-align:right")
    • По ширине (увеличивает расстояние между словами, чтобы заполнить область текстом от края до края, используя style="text-align:justify")
  • Кнопки ссылок

    • Цепь (добавляет ссылку к выбранному элементу используя теги<a href=""></a>)
    • Цепь с крестиком (удаляет ссылку из выбранного элемента)
    • Флаг (добавляет к ссылке якорь (id элемента))

Третий ряд

  • Правые кнопки

    • Изображение (добавляет изображение и позволяет указать атрибуты изображения)
    • Таблица (добавляет разметку html для таблицы и диалог для редактирования атрибутов)
    • Вставить специальный символ (§, ® и т.п)
    • Снипеты (позволяют выбор предустановленных html снипетов для особых случаев)
  • Кнопки стилей

    • Стили форматирования (позволяет выбрать встроенные в страницу стили или классы добавленные в шаблон темы)
    • Форматирование (выбор заголовков и стилей текста)
    • Шрифт (выбор шрифта из списка определенных шрифтов для изменения части текста добавлением тега using style="font-family:")
    • Размер шрифта (выбор размера шрифта используя тег style="font-size")
    • Цвет шрифта (изменение цвета текста используя тег style="color;#" )
    • Цвет фона (изменение фона текста добавлением тега style="background-color:#")
    • Отображать блоки (добавляет рамку вокруг блоков с добавлением метки типа элемента)

Настройка Текстового Редактора

В предыдущем параграфе показан стандартное меню редактора, установленного вместе с Concrete5.  

Дополнительно, возможно изменить и добавить другую функциональность и поведение редактирования через панель управления.

Мы переходим в панель управления на страницу Настройки Системы:

system-and-settings.jpg

 

 

Оттуда выбираем Редактор Текста в разделе "Общее".

 

  

Страница настройки Текстового редактора это список настроек, которые либо добавляют кнопки в меню редактора, либо создают контектстное меню или дополнительные возомжности. Ставя или снимая галочки, а затем нажав кнопку Сохранить или отменить, происходит немедленное изменение настроек, и они становятся доступными при следующем испоьзовании. 

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

 

Здесь довольно большой список опций, поэтому мы опишем их ниже и дадим дополнительную информацию о том, для чего они служат.

Расширения Concrete5

Вы скорее всего никогда не снимете галочку с чекбоксов для этих функций

  • ​​​​​​Разрешить выбор файла из Менеджера Файлов: позволяет выбирать изображения или файлы из Менеджера файлов когда вставляются ссылки,  изображения и т.п.
  • Разрешает выбирать страницы из Карты Сайта:  позволяет использовать карту сайта  Concrete при добавлении ссылок на страницы сайта. 

Плагины Редактора

  • О проекте:  добавляет кнопку в меню для показа версии и лицензии редактора
  • Автоподстройка размера области редактирования: когда отмечена чекбокс эта опция позовляет расширять или сужать вертикально меню, в зависимости от размера области редактирования контента.
  • Помощь: когда включено позволяет показывать информацию о кнопках. Нажимая Alt + 0 в редакторе показываются названия опций
  • Базовые стили:  эта опция добавляет следующие кнопки в меню редактора:
    • B
    • I
    • U
    • S
    • x2
    • x2 
  • Направление текста:  добавляет кнопку позволяющую менять направление текста на уровне блока (LTR - RTL)
  • Цитаты :  добавляет кнопку на уровне блока для цитат с добавлением тегов <blockquote></blockquote>
  • Буфер обмена : можно добавлять контент в буфер обмена редактора
  • Цветные кнопки:  добавляет в редактор следующие кнопки:
    • 'цвет текста'
    • 'цвет фонаr'
  • Диалог выбора цвета:  создает окно диалога для "выбора цвета" в таблице цветов, которые можно выбрать мышкой (эта опция предоставляет большую палитру цветов и возможность выбора значений hex).
  • Параметры контекстного меню: предоставляет контекстное меню редактора вместо нативного меню браузера.
  • Управление div-контейнерами : добавляет кнопку в меню  'создать div контейнер' и окно диалога как контекстное меню, позволяющее управлять созданием <div> контейнеров.  С этой опцией вы можете создавать divы прямо в контенте и добавлять стили и классы этих div из темы шаблона прямо в редакторе.
  • Путь элементов: когда инициировано, показывает список html тегов окружающих элемент контента, где находится курсор, может оказаться очень полезным чтобы быстро узнать какой элемент редактируется внутри. 
  • Продвинутая вставка изображения:  включение этой опции делает следующее:
    • опции для интегрированных заголовков изображения
    • опцию выравнивания изображений
    • возможность изменения размеров изображений в редакторе
      * но удаляет некоторые продвинутые атрибуты, которые представлены в стандартном редакторе изображений.
  • Ввод ключа:  при нажатии на кнопку ВВОД на клавиатуре редактор создает новый параграф (можно создвать разные конфигурации, но требует специальные знания)
  • Мнемоники HTML-символов:  эта настройка автоматически преобразует html теги в другие символы, которые могут создавать проблемы безопасности для хранения и вызова из базы данных
  • Поиск/Замена:  добавляет кнопки "найти" и "заменить" в меню редактора, для поиска текста в редактируемом контенте для замены слов в тексте. Здесь есть выбор опций соответствия и замены всех вхождений другим текстом. 
  • Flash:  добавляет кнопку диалога для вставки  'flash', чтобы управлять параметрами (масштаб, качество, выравнивание, цвет фона и т.д.)
  • Шрифт и его размер :  кнопка в меню редактора для изменения  'font-size' и 'font-family' в тексте
  • Форматирование :  добавляет выпадающий список для форматирования текста, например, заголовки, параграфы и т.п.
  • Горизонтальная линия :  кнопка добавления горизонтальной линии  <hr>
  • HTML-редактор: позволяет установить специфические правила html для Concrete5
  • Изображение: добавление "изображения" через меню и настройка атрибутов показа через диалоговое меню
  • Отступ для блока: добавляет кнопки "отступ внутрь"( 'indent' ) и "отступ наружу" ('outdent') 
  • Отступ для списка: добавляет отступы в списки (когда используете отступы в списках). Когда включено, отступы будут добавляться на каждом следующем уровне вложенности, при использовании  outdent будут удалятся отступы заменой списка тегом  <p>.
  • По ширине: добавляет кнопку выравнивания текста
    • 'left-align'
    • 'center-align'
    •  'right-align'
    •  'justify'
  • Язык: включает  кнопку  'language' поддерживаемые спецификацией WCAG 3.1.2 'Языковые разделы' specification (без дальнейшей конфикурации, ограничено только несколькими стандартными языками)
  • Список: добавляет кнопку "список"
  • Стиль списка: включает диалоги нумерования списков. Можно установить тип списка (кружок, квадрат, точка для маркированного списка, маленькие/большие римские числа,, маленькие/большие буквы для нумерованного списка, начальное число (для нумерованного списка). Внутри списка правый щелчок мыши покажет эти опции форматирования. 
  • Спойлер: устанавливает рамку вокруг элементов для их легкого выбора
  • Новая страница: не используйте эту опцию, так как она не корректно работает в Concrete5 нажав на эту кнопку вы можете потерять контент.
  • Разрыв страницы:  добавляет кнопку "разрыв страницы" для печати контента. Она добавляет  <div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>.
  • Вставка простого текста:  добавляет кнопку "вставить простой текст". При ее использовании удаляется вся информация о форматировании, ссылки и т.п. из текста добавленного из буфера обмена. Идеально подходит для копирования с веб страниц,  html или документов, в которых хотите удалить все форматирование и разметку. 
  • Вставка из Word: добавляет кнопку "вставить из Word' .  Используйте эту кнопку при копировании из word, в котором вы хотите оставить форматирование, ссылки из оригинального документа.
  • Просмотр:  эта опция не работает в Concrete5
  • Убрать форматирование:  добавляет кнопку "убрать форматирование", которая позволяет убрать все стили форматирования выбранного текста.
  • Проверка правописания через плагин (SCAYT): этот плагин не совместим с встроенным редактором Concrete5 , но альтернативный плагин Webspellchecker работает.
  • Выбрать Всё: добавляет кнопку "выбрать всё", позволяя выбрать весь текст в редакторе
  • Показ блоков: обрамляет все уровни блока элементов рамкой и отображает название элемента
  • Показ границ таблицы:  эта опция отображает видимые границы вокруг всех элементов таблицы, если не указаны границы таблицы. Если опция отключена, вы не увидите границы таблицы, у которой нет линий границ. 
  • Вставка смайла:  добавляет кнопку для выбора смайла из диалогового окна
  • Диалоговые окна в области с исходным кодом : добавляет кнопку "исходник" и позволяет редактировать html код прямо в редакторе. Эта кнопка используется для переключения между исходным кодом и видом wysiwyg редактора.
  • Отображение исходного кода: эта опция позволяет редактировать чистый html в своем собственном диалоговом окне (если вы выключите эту опцию, то исходник редактора будет вставлен прямо в окне редактирования, а не в отдельном окне).
  • Специальные символы:  кнопка "специальные символы". Нажав на эту кнопку появляется диалоговое окно со специальными символоми из расширенного набора символов)
  • Комбинированные стили:  добавляет выпадающий список "стилей", который позволяет установить стили ко всему блоку, инлайн и элементам объектов
  • Управление табуляцией: разрешает использование клавиш tab/shift+tab  - (tab = следующий элемент / shift+tab = предыдущий элемент)
  • Таблицы: кнопка вставки таблицы позволяет установить основные атрибуты таблицы:
    • строки/колонки
    • ширина и высота таблицы
    • отступы и промежутки между ячейками
    • заголовки таблицы
    • размер рамки
    • выравнивание на странице
    • шапка и футер таблицы
  • Изменение размера таблицы: эта опция позволяет зацепить мышкой края колонки и потянув, изменить её размер
  • Инструменты настройки таблицы:  позволяет использовать расширенное контекстное меню для элементов таблицы и атрибуты ячеек, добавляя следующие опции:
    • тип ячейки
    • ширина и высота ячейки
    • настройка обёртки слов
    • горизонтальное и вертикальное выравнивание
    • разбивку по рядам и колонкам
    • цвет ячеек и границ
    • вставка и удаление ячеек, рядов и колонок
    • объединение и разбивка ячеек по горизонтали и вертикали.
      *Расширенное контекстное меню появляется при клике правой кнопкой мыши внутри таблицы.
  • Отменить:  добавляет кнопки "отменить" и "восстановить" (можно отменить и восстановить до 20 последних комманд) 
  • Проверка правописания через плагин WebSpellChecker:  добавляет кнопку "проверить правописание", при использовании этой функции, текст проверяется на сайте  webspellchecker.net, вы можете выбрать из различных словарей, в которых проводится проверка правописания, синонимы, этот плагин показывает рекламу adsense в диалоговом окне, при приобретении лицензии, реклама не будет показываться. 
  • Создание ссылок через Concrete5:   добавляет возможность вставки ссылок в манере concrete5
  • Стили через инструменты Concrete5: добавляет функциональность стилей добавленных через шаблон темы concrete5
Загрузка беседы