Визуальный html редактор

В качестве удобного модуля для оформления контента Pedanto CMS использует многофункциональный визуальный редактор позволяющй бех знания html разметки оформлять страницы (например как эту) и статьи сайта. В качестве основного HTML редактора в Pedanto CMS уствновлен ckEditor, в нем есть все необходимое, чтобы оформить страницу, панель или новость без использования прямого редактирования html тегов.

Интерфейс визуального редактора ckEditor
Интерфейс визуального редактора ckEditor изменение изображения
Интерфейс визуального редактора ckEditor встраивание медиа контента

Описание панели управления визуального редактора

  • Источник
    Позволяет просмотреть HTML верстку вашего контента и внести в нее изменения вручную. Если вы не знаете HTML, то можно игнорировать эту опцию.
  • Шаблоны
    Заранее подготовленные шаблоны с Bootstrap разметкой на все случаи жизни. Просто выберите место в документе и выбранная вами разметка будет помещена в него.
  • Формат
    Позволяет создавать заголовки разных уровней в документе (H1, H2, H3, H4). Применяется для SEO оптимизации страницы и визуального оформления.
  • Полужирный
    Выделяет текст жирным шрифтом. Применяется для подчеркивания важности какой-то информации и определения ключевых слов.
  • Курсив
    Выделяет текст курсивом.
  • Подчеркнутый
    Подчеркивает выделенный текст.
  • Зачеркнутый
    Зачеркивает выделенный текст.
  • Надстрочный индекс
    Удобно применять для обозначения разметки типа м2 (метр квадратный)
  • Убрать форматирование
    Убирает весь лишний HTML код и стили, которые могли попасть в документ если вы скопировали информацию откуда-то из интернета. Рекомендовано применять всегда перед началом оформления такого текста, для этого достаточно его выделить и нажать на кнопку форматирования.
  • Нумерованный список
    Создает список нумерованный цифрами.
  • Маркированный список
    Список сопровождающийся маркерами. Прямо как тот который Вы сейчас читаете.
  • По центру
    Центрирует текст или изображение, для привязки его обратно к левому краю снова нажмите на значок центрирования.
  • Цитата
    Помещает выделенный текст в блок blockquote оформленный в соответствии с дизайном сайта
  • Создать Div
    Создает <div></div> контейнер (используется для продвинутых пользователей).
  • Вставить только текст
    Вставляет из буфера только текст без изображений и html стилей
  • Вставить из Word
    Позволяет правильно вставлять текст оформленный в Word
  • Вставить ссылку
    Диалоговое окно для добавления ссылки и ее заголовка.
  • Убрать ссылку
    Удаляет выбранную ссылку с текста или изображения.
  • Якорь
    Создает якорь к которому в дальнейшем можно сослаться ссылкой. Пример.
  • Сниппет
    Дает возможность встраивать части кода скриптов разных языков программирования для их визуального отображения в обертке <pre><code></code></pre>
  • Изображение
    Позволяет указать ссылку на изображение или выбрать его с сервера через файловый менеджер.
  • Медиа контент
    Просто укажите ссылку на YouTube видео или Soundcloud песню, а плагин сам встроит интерактивный элемент в редактор.
  • Таблица
    Форма простого создания таблиц. Позволяет добавлять и удалять ячейки, а также задавать размеры таблицы.
  • iFrame
    Позволяет встроить в контент iframe ссылку и задать ее размеры и стиль отображения.
  • Развернуть
    Разворачивает визуальный редактор во весь экран. Удобно при оформлении больших документов.
  • Отображать блоки
    Отображает все HTML блоки путем добавления к ним рамки, что позволяет лучше понимать разметку документа.

В визуальном редакторе предусмотрена функция загрузки изображений путем перетаскивания их непосредственно в окно редактирования. Такие изображения будут автоматически уменьшены до формата новостных (как правило 750px по ширине) и встроены в контент. Если же Вам необходима загрузка изображений в высоком качестве, то лучшим вариантом будет использовать загрузку через файловый менеджер.