Меню

Ckeditor для сайта настройка

Как я настраивал CKEditor…

На своем сайте использовал BUEditor – простой удобный редактор, но для пользователей он не очень удобен. Часто думал поставить CKEditor, но он мне казался каким-то монстром, но на деле все оказалось не так страшно.

Как установить модуль читаем тут.

UPD: На странице http://ckeditor.com/builder можно выбрать только те плагины и скины, которые вам нужны, и тогда некоторые из нижеперечисленных действий можно не производить.

1. Первым делом отключил низ редактора

Это прописываем в настройках модуля на странице admin/config/content/ckeditor/edit/назнание_профиля во вкладке ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ или в файле config.js

Если необходимо подключить несколько плагинов, то перечисляем их через запятую

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

После подключения через свой модуль, на странице admin/config/content/ckeditor/edit/назнание_профиля во вкладке ВНЕШНИЙ ВИД РЕДАКТОРА, в разделе Плагины появится чекбокс активации. Включаем, сохраняем, проверяем.

Так же появится новая иконка(кнопка) плагина.

4. Вставка изображений. Здесь все тоже самое, что и ссылками, можно поставить плагин Simple Image для вставки изображений по ссылке.

Или загружать изображения с помощью модуля One Click Upload.. Подробнее читаем тут. Я остановился на втором способе, хотя в BUEditor’е использовал оба.

Единственное что хочу добавить, плагин Enhanced Image требует еще два плагина Widget и Lineutils.

не мог понять, почему не запускается плагин, пока не заглянул в журнал

5. Внешний вид. По умолчанию используется скин Moono, я же хотел привести внешность к виду BUEditor’а.

так выглядел BUEditor

В итоге вот что получилось

6. Как написал SAM редактор по умолчанию вырезает классы и ID. Для того, чтобы этого не происходило прописываем в конфиге (см. п.1)

7. Placeholder. Чтобы добать placeholder устанавливаем плагин (см. п.2) Configuration Helper. Подключаем (см. п.1) :

Так выгледят смайлы из коробки:

Чтобы заменить их на свои необходимо в конфиге(см. п.1) указать путь до папки с изображениями smiley_path :

Прописать имена файлов (изображений), которые будут отображаться smiley_images :

И description (описание при наведении) smiley_descriptions

Так же можно указат во сколько колонок выводить смайлы (по умолчанию: 8) smiley_columns

Вот что у меня получилось

9. Проверка орфографии браузером. Как написал UksusoFF в CKEditor’е отключена браузерная проверка орфографии. Для того, чтобы отключить это отключение (немного тавтологии), необходимо прописать в конфиге:

Подробнее можно прочитать тут

10. Контекстное меню. В CKEditor’е, при нажатии ПКМ открывается контекстное меню, а не нативное меню браузера

Чтобы его отключить, прописываем в конфиге:

Источник

Установка и настройка CKEditor в Drupal 7

Настраиваем CKEditor, чтобы редакторы не пачкали разметку.

В Drupal ниже 8 версии (которая скоро выйдет в бету), по-умолчанию нету никаких WYSIWYG редакторов, что как бы заставляет новичка впасть в недоумение. Разумеется народ ищет модули с редакторами, и почему-то, чаще всего попадают на модуль wysiwyg, но он уныл, реально, ввиду того что он поддерживает 100500 редакторов, он работает черт пойми как. Сколько я его пробовал, никак не могу с ним ничего толкового сделать. Да и куда вам 100500 редакторов текста?

Читайте также:  Настройки для webmoney неверны сообщите продавцу об этом как исправить

В итоге я для себя уже давненько решил, что для задачи нужен один конкретный редактор который бы покрывал все мои необходимости. После долгих переборок я остановился на CKEditor. Он самый приятный на вид, хорошо кастомизируемый, а теперь еще в ядре Drupal 8.

Установка CKEditor

Настраиваем CKEditor для Filtered HTML

Для фула я не буду писать, по сути тоже самое, только очевидные изменения будут в пункте №3.

Там куча, уйма настроек: цвет редактора, оформление (замена css) и многое-многое другое. Я же остановлюсь на очень любопытной опции про HTML.

Настройка CKEditor для контент-менеджера

Контент — неотъемлемая составляющая сайта. Им можно сделать из сайта конфетку, даже если сам сайт не очень, и наоборот, если сайт конфетка, сделан профи, то его легко можно превратить в говно одним лишь контентом, что обычно и делают владельцы сайтов или нанятые ими контент-менеджеры.

Контент-менеджер — головная боль для разработчиков, и “вирус” для сайта.

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

А то что там идет целый букет таких вот вещей:

Инлайн стили, классы, обертки, шрифты намертво прописаны. А гнать то будут на разработчиков, как обычно… Тип а что у нас шрифты во всех статьях разные, а что эти шрифты у меня работают а у друга нет (когда в ворде заюзали нестандартный для систем шрифт) и т.д., я думаю многие это ощутили на себе.

В общем я считаю что нормальный контент-менеджер должен эту грязь вычищать самолично и руками, отлично знать HTML и тогда всё будет в порядке, но такие — настоящая находка, поэтому я сейчас расскажу как рубил руки идиотам.

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

Всё, дальше бремя мы скинем на CKEditor.

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

Я и сам пользуюсь таким редактором, ведь это удобно. Просто для себя я еще выношу кнопочку “Источник” чтобы я мог напрямую править html, по необходимости.

Для особо одаренных ¶

Бывают такие что и в таком варианте умудряются запоганить, поэтому в настройках CKEditor в разделе “Advanced options” включим “Force pasting as plain text” — т.е. что бы вы не вставляли в данный редактор, он его перегонит в обычный текст. Весь CSS, теги, вообще всё вырубается на корню. Пусть контент-менеджер поработает и поправит руками, зато код будет чистый. А там править то смехота.

Читайте также:  Почему wot лагает на минимальных настройках

Источник

Руководство пользователя CKEditor 4

CKEditor 4 — WYSIWYG редактор статей. Он позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.

Интерфейс

В окне WYSIWYG редактора находятся следующие панели кнопок:

Переключение режима просмотра
Печать и выбор шаблона статьи
Работа с буфером обмена (вырезать, копировать, вставить, отменить)
Поиск и замена
Создание форм
Вставка спойлеров (сворачиваемого текста) и разрывов страниц
Изменение стиля текста
Форматирование абзацев
Вставка ссылок
Вставка медиа-контента сторонних сайтов
Вставка объектов
Выбор стиля форматирования
Выбор форматирования абзаца
Выбор шрифта
Выбор размера шрифта
Выбор цвета текста или фона
Проверка орфографии
Дополнительные возможности просмотра (отобразить блоки и развернуть)

В нижней панели окна редактора содержится информация о текущем теге и статистика текста:

Символов Количество символов в статье
Выделено Количество выделенных символов
Исходник Количество символов в HTML-коде статьи с учетом тегов
Слов Количество слов в тексте

Переключение режима просмотра

В панели переключения режимов просмотра редактора находятся кнопки:

Кнопка переключения режима отображения. Если кнопка включена, то отображается HTML-код статьи. Если выключена, то статья отображается в том виде, в котором она будет представлена на веб-странице.
Кнопка предварительного просмотра. При нажатии статья открывается в отдельном окне веб-браузера для предварительного просмотра.

Печать и выбор шаблона статьи

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

Работа с буфером обмена

В редакторе доступны следующие операции по работе с буфером обмена:

Кнопка «Вырезать». Вырезает выделенный фрагмент статьи и помещает его в буфер обмена.
Кнопка «Копировать». Копирует выделенный фрагмент статьи и помещает его в буфер обмена.
Кнопка «Вставить». Вставляет в статью содержимое буфера обмена. Если текст вставляется из внешних приложений, например, MS Office, при вставке будут включены все теги, связанные с форматированием. Большая часть данных тегов является лишней и должна быть удалена, что затрудняет редактирование статьи. Поэтому данной кнопкой рекомендуется пользоваться только для вставки неформатированных текстов.
Кнопка «Вставить только текст». Аналогична кнопке «Вставить». При вставке фрагмента статьи из буфера обмена его форматирование полностью удаляется.
Кнопка «Вставить из Word». Аналогично кнопке «Вставить». Используется, если требуется сохранить форматирование вставляемого фрагмента. При вставке оптимальным образом сохраняется внешний вид текста и удаляется ненужное форматирование. Рекомендуется использовать при копировании текста из MS Word или других приложений MS Office.
Кнопка «Отменить». Используется для отмены последнего выполненного изменения.
Кнопка «Повторить». Используется для возврата последнего отмененного изменения.
Читайте также:  Настройка роутера tp link для mclaut

Поиск и замена

В панели поиска и замены находятся следующие кнопки:

Кнопка «Найти». Используется для поиска заданного фрагмента текста в статье.
Кнопка «Заменить». Используется для поиска и замены фрагмента текста в статье.
Кнопка «Выделить все». При нажатии на данную кнопку выделяется все содержимое статьи.

Поиск

При нажатии на кнопку «Найти» открывается окно поиска:

В поле «Найти» вводится искомый фрагмент текста.

Доступны следующие опции:

Для выполнения поиска необходимо ввести искомый фрагмент, включить требуемые опции поиска и нажать кнопку «Найти». Редактор выполнит поиск и выделит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Найти» редактор будет выполнять поиск далее по тексту и выделять очередной найденный фрагмент.

Замена

При нажатии на кнопку «Заменить» открывается окно замены фрагмента текста:

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

Доступны следующие опции:

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

Создание форм

Формы предназначены для ввода данных пользователем в окне браузера, передаче их обработчику и, при необходимости, вывода результатов обработки. Например: форма регистрации пользователя, форма обратной связи и т.д.

В панели создания форм находятся следующие кнопки:

Форма

При нажатии на кнопку «Форма» открывается окно настроек новой формы.

В окне настроек формы находятся следующие поля:

Чекбокс

В окне настроек элемента «Чекбокс» находятся следующие поля:

Радиокнопка

В окне настроек элемента «Радиокнопка» находятся следующие поля:

Текстовое поле

В окне настроек элемента «Текстовое поле» находятся следующие поля:

Доступные типы содержимого:

Многострочное текстовое поле

В окне настроек элемента «Текстовое поле» находятся следующие поля:

Выпадающий список

В окне настроек списка множественного выбора находятся следующие поля:

Группа параметров «Доступные варианты»:

Завершение статьи следует…

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

Источник

Adblock
detector