Ckeditor настройка: Настройка CKEditor под себя — подключение плагинов, удаление кнопок

23.09.2020 alexxlab

Содержание

Как я настраивал CKEditor… | Dru.io

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

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

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

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

config.removePlugins = 'elementspath';
config.resize_enabled = false;

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

2. В связи с отключением низа редактора, у нас пропала возможность растягивания текстовой области. Установим плагин автоматического ресайза Auto Grow (при использовании BUEditor’а пользовался плагином Textarea autoresize). Скачиваем, распаковываем архив в

sites/all/libraries/ckeditor/plugins. Подключаем (см. п.1) :

config.extraPlugins = 'autogrow';

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

config.extraPlugins = 'myplugin,anotherplugin';

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

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

3. Вставка ссылок. Из коробки диалоговое окно вставки ссылок содержит кучу не нужного и не понятного. Заменяем его плагином Simple link. Как устанавить, смотрим в п.2 . Подключаем (см. п.1) :

config.extraPlugins = 'SimpleLink';

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

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

config.extraPlugins = 'SimpleImage';

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

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

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

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

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

Для этого создаем свой скин (я взял за основу Office 2013). Переименовываем и загружаем в папку sites/all/libraries/ckeditor/skins, после чего включаем его по адресу admin/config/content/ckeditor/editg. Вооружившись Firebug’ом правим CSS нашего скина.

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

UPD

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

config.allowedContent = true;

Подробнее тут

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

config.extraPlugins = 'confighelper'; 
config.placeholder = 'Наш текст'; // текст нашего placeholder

Подробнее тут и тут(+демо)

8. Смайлы. За смайлы в CKEditor’e отвечает плагин Insert Smiley , он в ходит в стандартный пакет — Full Package.

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

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

config.smiley_path = '/sites/default/files/smileys/';

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

config.smiley_images = ['smile_1.png','smile_2.png'];

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

config.smiley_descriptions = ['description-1', 'description-2'];

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

config.smiley_columns = 6;

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

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

config.disableNativeSpellChecker = false;

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

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

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

config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';

смотри

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

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

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

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

Установка CKEditor

Заходим на сайт CKEditor выбираем “Full version” и качаем архив.
На ftp сайта заходим в /sites/all/libraries (если последней нету, просто создайте) и скидываем туда нашу папку ckeditor из архива.
Скачиваем, устанавливаем и включаем модуль CKEditor.

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

В админке заходим: admin/config/content/ckeditor и жмем “Edit” у Advanced.
В “Basic setup” должен быть выбран “Filtered HTML” или иной, который используется у вас для ввода с ограничением по тегам.
Переходим в “Editor Appearance” и в разделе toolbar жмем “basic”. Это поставит нам базовый набор элементов.

Сохраняем.

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

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

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

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

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

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

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

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

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

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

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

Переходим на страницу создания нового формата: admin/config/content/formats/add
Называем, например: Редактирование содержимого (content_editing)
Даём права кому нужно. У меня, как правило, контент-менеджер это целая роль с запретами на всё что их руки зачешутся сломать.

По сути они часто юзают вставку картинок и прочего, поэтому рубить им html нельзя. Единственные фильтры что я включаю: 1. Convert line breaks into HTML (i.e. <br> and <p>)
Convert URLs into links
Correct faulty and chopped off HTML

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

Заходим в настройки CKEditor: admin/config/content/ckeditor
Создаем новый профиль.
В “Basic setup” даём ему соответствующее название и выбираем созданный нами формат ввода.

Переходим во вкладку “Editor Appereacne” и загружаем “Basic” (им опасно давать что-то больше этого).

В разделе “Cleanup and output” надо подправить “Font formats” — это те теги, что они смогут выбирать в качестве стиля, я делаю так: p;h3;h4;h5;h5;h6 — т.е. убираем div, address, pre и h2. Иначе они и ими нагадят. Я считаю что больше для текста ничего им давать не нужно. Основные заголовки и параграф — всё.

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

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

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

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

Настройка CKEdit или как убрать лишние значки на панели

В предыдущей статье я поделился с Вами отличным WISIWIG-редактором, который замечательно подходит для использования его на большинстве сайтов. Этот инструмент несомненно облегчает набор и редактирование текста, несведущим в html людям.

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

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

Секрет всего фокуса заключается в том, что практически все настройки сосредоточены в файле /ckeditor/config.js. Неожиданно правда. Если Вы, как и я, используете в качестве CMS Textpattern, то путь к файлу будет немного другой — /textpattern/ckeditor/config.js.
По-умолчанию (без какой-либо настройки) файл выглядит так:

CKEDITOR.editorConfig = function(config) {};

Для того, чтобы настроить вывод значков на панели, нужно добавить параметр config.toolbar_Full. Для того, чтобы вывести все возможные значки, которые предлагает эта система, на панель, добавляем код:

CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
	{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
	{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
	{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
	{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
	{ name: 'colors', items : [ 'TextColor','BGColor' ] },
	{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
};

Для того, чтобы убрать ненужные значки, необходимо вручную удалить его обозначение („Maximize“, „ShowBlocks“ и т.д.) в этом коде. Соответственно сохранив правильный синтаксис. Сложного здесь, думаю, ничего нет.

Как делаю я?

Обычно для клиентского сайта я использую вот такой вид:

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

Для примера, такой вид интерфейса, можно настроить вот таким кодом:

CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
	{ name: 'document', items : [ 'Undo','Redo'] },
	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Subscript','Superscript','Format' ] },
	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
	{ name: 'links', items : [ 'Link','Unlink' ] },
	{ name: 'insert', items : [ 'Image','Table','SpecialChar' ] },
	{ name: 'tools', items : [ 'Maximize','Source'] }
];
};

Еще раз повторюсь, если скажу, что на сегодняшний день CKEdit – это лучшая система, которую я только видел.

Теги: JavaScript

Инструкция к редактору CKEditor (FCKeditor)

Виваком предоставляет услуги по настройке, установке и обучению работе с редактором CKeditor (FCKeditor) для любых сайтов.

Описание CKeditor (FCKeditor)
Форматирование текста
Изображения
Таблицы
Ссылки
Источник
Ограничения

Описание CKeditor (FCKeditor)

Текстовый редактор CKeditor (FCKeditor) обладает большим количеством разнообразных функций. Он оформлен в стиле MS Word, что делает обращение с ним более привычным.

Форматирование текста

Кнопки общего редактирования содержимого. Их назначение аналогично кнопкам редактора MS Word.

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

Кнопка «Копировать». Копирует выделенный текст в буфер, в дальнейшем текст может быть вставлен.

Кнопка «Вставить». Вставляет на место курсора текст в том виде в котором он находиться в буфере, т.е. форматирование сохраняется.

Кнопка «Вставить только текст». Вставляет из буфера только текстовую информацию, форматирование сбрасывается. Изображения игнорируются, ссылки заменяются простым текстом.

Кнопка «Вставить из Word». Этот инструмент позволяет вставить текст заранее набранный в редакторе MS Word. При этом вставленный текст очищается от лишнего «мусора».

Сервисы CKeditor (FCKeditor)

Кнопка «Отменить». Отменяет последнее действие пользователя.
Кнопка «Повторить». Возвращает последнее отмененное действие.
Кнопка «Найти». Вызывает диалоговое окно поиска.

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

Пункт «Учитывать регистр». При поиске будет учитываться регистр текста.
Пункт «Совпадение целых слов». Поиск будет производиться по ключевому слову/фразе в дословно.
Кнопка «Заменить». Используется для замены найденного текста другим.

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

Кнопка «Заменить». Производит замену по порядку один за одним, найденный текст.

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

Кнопка «Выделить все». Выделяет весь текст HTML страницы (обычно используется перед копированием, удалением или применением стиля или форматирования ко всей странице)

Кнопка «Убрать форматирование». Сбрасывает форматирование выделенного текста.

Стили шрифта

Кнопки стилей шрифта.

Кнопка «Жирный». Установка жирного начертания текста.
Кнопка «Курсив». Установка курсивного начертания текста.
Кнопка «Подчеркнутый». Установка подчеркивания текста.
Кнопка «Зачеркнутый». Установка вычеркивания текста.
Кнопка «Подстрочный индекс». Преобразует текст в нижний индекс.
Кнопка «надстрочный индекс». Преобразует текст в верхний индекс.

Структурирование текста

Кнопка «Вставит/Удалить нумерованный список». Создает нумерованный (упорядоченный) список из выделенного текста.
Кнопка «Вставит/Удалить маркированный список». Создает маркированный неупорядоченный) список из выделенного текста.
Кнопка «Уменьшить отступ». Уменьшает отступ текстового фрагмента.
Кнопка «Увеличить отступ». Увеличивает отступ текстового фрагмента.

Выравнивания текста

Кнопка «По левому краю». Устанавливает выравнивание по левому краю для абзаца.
Кнопка «По центру». Устанавливает выравнивание по центру для абзаца.
Кнопка «По правому краю». Устанавливает выравнивание по правому краю для абзаца.
Кнопка «По ширине». Устанавливает выравнивание по ширине для абзаца.

Вставка ссылок, изображений, таблиц

CKEditor позволяет добавлять изображения в ваши документы легким и интуитивно понятным способом.

Изображения

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

Информаци о изображении
Ссылка
Расширенный

Информация о изображении

Вкладка Информаци о изображении является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Она позволяет установить URL изображение и настроить, как она появится в документе.

Ниже представлен обзор всех элементов изображения закладке Информация:

URL — веб-адрес изображения. Изображение может быть расположен на том же сервере, веб-сайт, который вы в настоящее время или на внешний сервер.
Внешний сервер: если вы хотите использовать внешний адрес, использовать полный абсолютный путь.
Пример:
Локальный сервер: Если образ расположен на том же сервере, вы можете использовать абсолютный путь, который не включает доменное имя и начинается с косой черты.
Пример:
/images/image2.jpg
Если CKEditor интегрирован с файловым браузером , вы можете также использовать кнопку Просмотреть на сервере, чтобы выбрать изображение.

Альтернативный текст — короткое текстовое описание изображения, которое рассказывает пользователям вспомогательных устройств (таких как программы чтения с экрана), что образ о. Вы всегда должны предоставлять изображения со значимыми альтернативный текст для того, чтобы сделать его доступным для пользователей с ограниченными возможностями.
Ширина — ширина изображения в пикселях. По умолчанию это размер исходного изображения.
Высота — высота изображения в пикселях. По умолчанию это размер исходного изображения.
Граница — размер твердых границ вокруг изображения в пикселях.
Горизонтальный отступ — горизонтальные интервалы (или маржа) между краями изображения (если имеется) или само изображение и другие элементы документа, которые окружают изображения в пикселях.
Вертикальный отступ— вертикальное расстояние (или маржа) между краями изображения (если имеется) или само изображение и другие элементы документа, которые окружают изображения в пикселях.
Выравнивание — выравнивание изображения в документе. Доступные опции по правому краю и по левому краю.
Preview — предварительный просмотр выбранного изображения отформатированного в соответствии с выбранными параметрами.

Изменение изображения

С CKEditor (FCKeditor) вам не придется беспокоиться об изменении размера изображения.

Если изображение слишком большое, вы можете изменить его размеры, введя новые значения в полях Ширина и Высота. По умолчанию сохранение пропорций изображения сохранено, об этом говорит кнопка . Это означает, что при изменении одного из значений размера (ширина или высота), а другой будет корректироваться автоматически.

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

Вы можете легко вернуться к исходному размеру изображения нажатием кнопки . Это сбросит размер; оригинальная ширина и высота появится в соответствующих текстовых полях.

Ссылка

Вкладка Ссылка позволяет назначить ссылку на изображение вставленое в документ, по сути преобразование изображения в интерактивную ссылку. Ссылка может указывать на объект любого типа доступных в Интернете, как и простые URL адреса ,так и PDF документ или онлайн-видео.

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

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

Ниже приводится краткий обзор всех элементов вкладки Ссылка:

URL — адресс картинки, которая откроется при нажатии на исходное изображение. Это может быть простой адрес веб-сайта, изображения или другой файл, который находится на том же сервере.
Внешний сервер: если вы хотите использовать внешний адрес, использовать полный абсолютный путь.
Пример:

Локальный сервер: Если местоположение цели находится на том же сервере, вы можете использовать абсолютный путь, который не включает доменное имя и начинается с косой черты.
Пример:
/howto/images
/images/largeimage2.jpg
Если CKEditor интегрирован с файловым браузером , вы можете также использовать кнопку Просмотреть на сервере, чтобы выбрать изображение или файл.

Target— окно, в котором назначены ссылка откроется после нажатия изображения. Вы можете выбрать между New window ( _blank ), Topmost window( _top ), Same window ( _self ), или родительское окно ( _parent ).

Чтобы при нажатии открылось полноэкранное окно просмотра изображения в URL укажите адресс открывающегося изображения, в Target выберите пункт New window. В следующей опции выберите пункт Сделать одиночное открытие

Расширенный

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

Ниже представлен обзор всех элементов вкладки:

Идентификатор — уникальный идентификатор для элемента изображения в документе ( id атрибута).
Направление Язык — направление текста: слева направо (LTR) или справа налево (RTL) ( dir атрибута).
Язык — язык элемента изображение, указанного в соответствии с RFC 1766 ( lang атрибута).
Длинное Описание URL — веб-адрес HTML-страницы, содержащей более подробное описание образа ( longdesc атрибут).
Классы CSS — класс элемента изображения ( class атрибута). Обратите внимание, что изображению может быть назначено более одного класса. Если это так, отдельные имена классов указываются через пробел.
Заголовок — текст подсказки, который отображается, когда курсор мыши находится над изображением ( title атрибута).
Стиль CSS — CSS стиль ( style атрибута). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой и индивидуальные свойства должны быть разделены пробелами.

Выбор изображения на сервере, загрузка изображенйи на сервер.

При нажатии на кнопку Просмотреть на сервере откроется диалоговое окно-обраузер, которое отобразит все имеющиеся файлы на сервере

Ниже представлен обзор всех элементов таблицы вкладку Свойства:

Закачать— используется для загрузки файла на сервер с локального диска (вашего ПК)
Thumbnails — опция отображения файлов. Список — иконки.
Удалить — удаляет выбранный фаил.
Resize — изменяет размер диалогового окна.
Insert file— вставляет ссылку выбранного файла в диалоговое окно вставки изображения в документ

Обратите внимание, что этот способ загрузки на сервер изображения подходит только для файлов общим объемом меньше чем 2 Mb.

Таблицы

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

Создание таблицы

Чтобы создать таблицу в CKEditor (FCKeditor), нажмите кнопку на панели инструментов. В открывшемся окне можно задать параметры, которые определяют размер таблицы, её свойства.

Диалоговое окно Свойства таблицы состоит из двух вкладок:

Свойства таблицы
Расширенный

Свойства таблицы

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

Ниже представлен обзор всех элементов таблицы вкладку Свойства:

Строки — количество строк в таблице (обязательно).
Колонки — количество столбцов в таблице (обязательно).
Ширина — ширина таблицы в пикселях или процентах. Значение ширины в процентах позволяет установить долю занимаемую таблицей от области в котрой она находится (Родительский тэг).
Высота — высота таблицы в пикселях.
Заголовки — выпадающий список, формат определенных ячеек таблицы, который применяет специальное форматирование к ним. Вы можете применить форматирование заголовка Первая строка, первая колонка, или то и другое.
Размер бордюра — толщина границы таблицы в пикселях.
Выравнивание — выравнивание таблицы на странице. Доступны следующие варианты: По левому краю, по правому краю, по центру.
Промежуток — пространство между отдельными ячейками в пикселях по горизонтали.
Отступ — расстояние между границей ячейки и ее содержимым, в пикселях по вертикали.
Заголовок — метка в таблице, которая отображается в верхней части ее.
Резюме — краткое изложение содержания таблицы, которое доступно для вспомогательных устройств, таких как программа чтения с экрана. Это хорошая практика предоставления таблиц с осмысленным текстом для того, чтобы сделать его более доступным для пользователей с ограниченными возможностями.

Расширенный

Вкладка Расширенный позволяет настроить дополнительные параметры, такие как присвоить её идентификатор класса, языковое направление, или свойства CSS стиля. Она предназначена для продвинутых пользователей со знанием HTML, а также CSS, и дает почти неограниченные возможности.

Ниже представлен обзор всех передовых элементов вкладки:

Идентификатор — уникальный идентификатор для элемента таблицы в документе ( id атрибута).
Направление языка— направление текста в таблице: слева направо (LTR) или справа налево (RTL) ( dir атрибута).
Stylesheet Classes — класс элемента таблицы ( class атрибута). Обратите внимание, что таблице может быть назначено более одного класса. Если это так, отдельные имена классов через пробелами.
Style — CSS стили ( style атрибута). Обратите внимание, что каждое значение должно заканчиваться точкой с запятой и индивидуальные свойства должны быть разделены пробелами.

Работа с таблицами

После вставки в документ, таблица может быть изменена. Для редактирования таблицы, дважды щелкните по нему или откройте контекстное меню таблицы, щелкнув на ней правой кнопкой мыши или с помощью клавиши на клавиатуре.

Чтобы удалить всю таблицу и ее содержимое, используйте опцию Удалить таблицу.

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

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

Редактирование строк таблицы

Контекстное меню таблицы позволяет редактировать строки таблицы. Если навести курсор мыши на пункт меню Строка, дополнительные возможности становятся доступными.

Ниже представлен обзор всех строк контекста элементов меню:

Вставить строку До — вставляет новую строку перед той, которая содержит курсор.
Вставить строку после — вставляет новую строку после той, которая содержит курсор.
Удалить строки — удаляет строку, в которой находится курсор.

Обратите внимание, что CKEditor позволяет выбрать несколько ячеек таблицы с помощью мыши, так что операции, могуть быть применены ко многим строкам таблицы сразу.

Редактирование столбцов таблицы

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

Ниже представлен обзор всех Колонка контексте элементов меню:

Вставить колонку До — вставляет новый столбец перед тот, который содержит курсор.
Вставить колонку после — вставляет новый столбец после тот, который содержит курсор.
Удалить колонку — удаляет столбец, который содержит курсор.

Обратите внимание, что CKEditor позволяет выбрать несколько ячеек таблицы с помощью мыши, так что операции, могуть быть применены ко многим столбцам таблицы сразу.

Редактирование ячейки таблицы

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

Ниже представлен обзор всех сотовых контексте элементов меню:

Вставьте ячейку До — вставляет новую ячейку до той, которая содержит курсор.
Вставьте ячейку После — вставляет новую ячейку после той, в которой находится курсор.
Удалить ячейки — удаляет ячейку, которая содержит курсор.
Объединить ячейки — слияние нескольких ячеек в одном. Эта опция доступна только если две или больше клеток будут выделены.
Слияние правой — сливается выбранной ячейки с ячейкой справа от нее. Эта опция доступна только, если не больше, чем одна ячейка.
Слияние с нижней — сливается с выбранной ячейки, расположенной на его дне. Эта опция доступна только, если не больше, чем одна ячейка.
Разбить ячейку горизонтально — разделяет выбранную ячейку на две части, создав новую ячейку справа от нее. Содержимое ячейки помещается в левую ячейку. Эта опция доступна только, если не больше, чем одна ячейка.
Разбить ячейку по вертикали — разбивает выбранной ячейки на две части, создав новую ячейку на её дне. Содержимое ячейки помещается в левую ячейку. Эта опция доступна только, если не больше, чем одна ячейка.
Свойства ячейки — открывает Свойства ячейки, позволяет настроить размер ячейки, тип, цвет и выравнивания.

Свойства ячейки

Ячейки таблицы в CKEditor (FCKeditor) можно дополнительно настроить, создав уникальный внешний вид. Различные опции конфигурации могут быть установлены в диалоговом окне Свойства ячейки, который открывается из контекстного меню ячейки таблицы.

Ниже представлен обзор всех элементов Свойства ячейки диалоговое окно:

Ширина — ширина ячейки в пикселях или процентах стоимости. Предоставление ширина в процентах значения позволяет установить долю строки, ячейки (и колонки он расположен в) будет занимать.
Высота — высота ячейки в пикселях.
Тип ячейки — либо нормальная ячейка данных или ячейку заголовка со специальным форматированием.
Перенос по словам — этот параметр включает перенос слов из содержимого ячейки и выключается.
Row Span — этот параметр растягивает ячейку вниз на несколько строк. Ввод числового значения наборов rowspan атрибут.
Column Span — эта настройка тянется ячейку вправо на несколько столбцов. Ввод числового значения наборов colspan атрибут.
Горизонтальное выравнивание — горизонтальное выравнивание содержимого ячейки таблицы. Доступны следующие варианты: левый, центральный, правый.
Выравнивание по вертикали — вертикальное выравнивание содержимого ячейки таблицы. Доступны следующие варианты: верхней, средней, нижней или базового уровня.
Цвет фона — цвет фона ячейки. Вы можете использовать любой из следующих методов, чтобы установить цвет:

Введите RGB значение в текстовое поле, в rgb( nn , nn , nn ) формате, где nn является числовым значением по шкале от 0 до 255 представляют красный, зеленый и синий канал.
Введите шестнадцатеричное значение RGB в текстовое поле, в # nnnnnn формате, где n буквы
обозначают три пары шестнадцатеричных значений цвета — красный, зеленый и синий канал.

Используйте кнопку Обзор, чтобы открыть диалоговое окно выбора цвета и выбрать цвет с помощью мыши.

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

Введите RGB значение в текстовое поле, в rgb( nn , nn , nn ) формате, где nn является числовым значением по шкале от 0 до 255 представляют красный, зеленый и синий канал.
Введите шестнадцатеричное значение RGB в текстовое поле, в # nnnnnn формате, где n буквы
обозначают три пары шестнадцатеричных значений цвета — красный, зеленый и синий канал.

Используйте кнопку Обзор, чтобы открыть диалоговое окно выбора цвета и выбрать цвет с помощью мыши.

Ссылки

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

Чтобы вставить ссылку на вас документ, нажмите кнопку на панели инструментов или используйте сочетание клавиш Ctrl + L. Если вы хотите вставить ссылку, которая будет присвоена фрагменту текста, сначала выберите его. Если текст не выбран, то URL ссылки появится в документ как есть.

Диалоговое окно позволяет выбрать тип соединения и параметры конфигурации, относящиеся к Вашему выбору. Оно содержит три или две вкладки, в зависимости от типа ссылки:

Информация ссылки
Цель
Расширенный

Тип ссылки: URL

URL является по умолчанию типом ссылки, это позволяет добавлять адрес веб-сайта в документ. Для этого типа ссылки используются три дополнительные вкладки.

Информация ссылки

Вкладка Информации ссылки является закладкой по умолчанию, которая открывается после нажатия кнопки на панели инструментов. Это позволяет вам выбрать тип ссылки, а также набор протоколов связи и URL.

Ниже представлен обзор всех элементов Ссылка закладке Информация:

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

URL — адрес веб-сайта любого ресурса, доступного в Интернете, как и веб-сайт, PDF документ или изображение.
Пример:

Ссылка на якорь в тексте — внутренние ссылки, указывающие читателю назначенный пункт в документе.
Пример:
#anchor1
Электронная почта — адрес электронной почты.
Пример:
[email protected]

Протокол — протокол связи используется в веб-адресе. Вы можете выбрать один из следующих вариантов: http:// , https:// , ftp:// , news:// , или <other> .

URL — веб-адрес ресурса, на который ссылка указывает. Он может быть расположен на том же сервере, или на внешнем сервере.

Внешний сервер: если вы хотите использовать внешний адрес, использовать полный абсолютный путь.
Пример:
Локальный сервер: Если ресурс находится на том же сервере, вы можете использовать абсолютный путь, который не включает доменное имя и начинается с косой черты.
Пример:
/about/mission.html
/howto/printing.avi

CKEditor (FCKeditor) интегрирован с файловым браузером, вы можете также использовать кнопку Просмотреть на сервере, чтобы выбрать нужный вам фаил..

Цель

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

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

<not set> — по умолчанию, которая открывает ссылку в том же окне браузера или вкладку в качестве документа.
<frame> — параметр, который открывает ссылку в кадре, указанным в поле Объект Название текста Frame. Текст отображается только после выбора <frame> как цель.
New window — Откроется в новом окне
Same window — Откроется в активном окне
Topmost window — Откроется в новом активном окне
Parent window — откроется в родительском окне

Источник

При нажатии кнопки Источник, CKEditor переключится в режим исходного кода. Этот режим рекомендуется только для опытных пользователяй. Для работы с ним необходимы знания HTML и CSS.
В этом режиме редактор Вам отобразит ваш документ в html разметке, что даст больше возможностей по настройки его отображения и добавит дополнительные возможности к программированию документа.

Ограничения

В системе управления можно работать только в браузерах: Internet Explorer 7 и выше, Opera, Mozilla, Chrome.
Имя загружаемого файла может содержать только: цифры, буквы латинского алфавита,
нижнего регистра. [a-z] [0-9]

Пример правильного имени: my_big_file123.doc

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

Неправильный пример имени: “Мой_Большой файл!@#$%^^&*”.doc

Если Файл имеет размер более 2 Мегабайт, то его необходимо загружать через отдельную систему загрузки больших файлов

Установка и настройка текстового редактора CKEditor

Существует несколько текстовых редакторов с удобным интерфейсом, которые вы можете использовать в текстовых полях. Они позволяют легко вводить и форматировать текст, вставлять в него картинки и ссылки. Мне больше всего нравится CKEditor. О нем и поговорим.

Для того чтобы воспользоваться этим редактором нужно сначала установить модуль CKEditor (http://drupal.org/project/ckeditor),

а затем скачать сам редактор (http://ckeditor.com/download )

и распаковать его в директорию /sites/all/libraries (создайте эту директорию, если ее не существует)

Форматы текста

Откройте пункт административного меню Конфигурация – Работа с содержимым – Форматы текста (admin/config/content/ formats).

По умолчанию система предлагает три формата текста: Filtred HTML, Full HTML и Plain text.

Форматы формируются с помощью фильтров, которые изменяют содержимое и дают на выходе разметку HTML, пригодную для отображения. Например, URL filter преобразует текст с URL-адресом, такой как http://drupal.org, в гиперссылку <a href=”http://drupal.org”> http://drupal.org</a> .

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

Поэтому следует семь раз подумать, прежде чем давать права на использование формата Full HTML какой-либо роли или пользователю.

Вы можете внести изменения в любой из форматов. Однако, не советую вам этого делать. Если вас не устраивают существующие форматы, то добавьте новый формат и установите те настройки, которые считаете нужным. Но для этого вам нужно очень хорошо разбираться в языке HTML, иначе вы можете навредить сайту.

Для тренировки создадим новый формат My Format.

Щелкните по ссылке +Добавить формат текста.
В текстовое поле Имя введите название нового формата – My Format
Укажите, что этим форматом смогут пользоваться все Роли, кроме анонимных пользователей.
Включите следующие фильтры:
- Пропускать указанные ниже HTML-теги
- Заменять переводы строк соответствующими HTML-тегами (т.е. <br> и <p>)
- Преобразовывать адреса в ссылки
- Исправлять неправильный и обрезанный HTML

Измените Порядок фильтров, перетащив фильтр Преобразовывать адреса в ссылки на самый верх
Откройте вкладку Пропускать указанные ниже HTML-теги. В текстовое поле Допускаются только следующие теги HTML введите следующий список:
<a> <b> <blockquote> <br> <caption> <center> <code> <col>

Нажмите кнопку Сохранить настройки

Мы создали новый формат текста. Создадим еще и новый профиль для CKEditor.

Откройте пункт административного меню Конфигурация – Работа с содержимым – CKEditor (admin/config/content/ckeditor).

Щелкните по ссылке Create new profile
Раскройте секцию Basic setup и укажите название нового профиля (Profile name) – My_Profile, а также установите отметку для формата текста My Format
Нажмите кнопку Сохранить.

Установка визуального редактора CKEditor. Настройка CKEdit или как убрать лишние значки на панели Ckeditor установка

В Drupal 7, как и в шестой версии нет встроенного визуального редактора.

Руководство пользователя: как установить и настроить редактор ckeditor в друпал 7. Загрузка изображений с Elfinder.

В друпал 7, как и в шестой версии, нам нужно установить редактор. Конечно, можно этого не делать и писать тексты, видя только код. Но мне нравятся визуальные редакторы. Напомню, что установку и настройку для друпал 6 мы изучили в уроке 2:

Сегодня мы рассмотрим рабочую связку cms с редактором.
drupal 7.17
CKEditor — WYSIWYG HTML editor 7.x-1.11
CKEditor 4.0
elFinder file manager 7.x-0.7
скрипт elFinder — elfinder-1.2

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

Как установить WYSIWYG редактор CKEditor на последнюю версию CMS Drupal 7.17

CKEditor – это гибкий и удобный редактор. Его интерфейс напоминает ворд.
Сначала устанавливаем скрипт редактора, потом сам модуль. Именно модуль подключит его к сайту.
Примечание.
Я указываю конкретные версии на момент написания статьи.

1. Скачать модуль ]]> https://drupal.org/project/ckeditor ]]>
Архив распакуйте в папку site/all/modules . Весь путь выглядит так: site/all/modules/ckeditor

2. Скачать редактор CKEditor 4.0 ]]> https://ckeditor.com/download ]]>
Для файлов редактора нужно создать папку libraries в site/all/
Путь распаковки архива будет таким: site/all/libraries/ckeditor

На странице модулей включаем, а затем настраиваем.
Идем «Конфигурация — CKEditor — Глобальный профиль CKEditor – Изменить». Здесь нужно проверить запись в поле «Путь к CKEditor» — должно быть %l/ckeditor . Эта запись показывает, что редактор находится в папке libraries .

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

Если редактор не отображается:
Проверьте правильность выбранных релизов модулей для вашей версии друпал. Попробуйте поменять на другой релиз.

Настройка профилей редактора CKEditor

1 шаг. Настройка профиля Advanced в редакторе CKEditor.
Advanced (расширенный, с загрузкой изображений и т. д.)
Идем «Управление > конфигурация > ckeditor — admin/config/content/ckeditor
Настроим профиль Advanced, кликаем ссылку «изменить» напротив профиля Advanced.
Внешний вид редактора (Editor appearance):
Выбираем колор.

Перетаскиваем нужные кнопочки.

Язык выбираем русский.

File browser settings
Выбираем по своему вкусу файловый менеджер, ниже по тексту есть установка и настройка файлового менеджера для друпал 7 – Elfinder.

2 шаг. Настройка профиля Full в редакторе ckeditor
Идем «Управление — конфигурация – ckeditor» — admin/config/content/ckeditor
Оставить настройки можно по умолчанию, выбрать русский язык.

Самый простой вариант использовать Full (полный) и Advanced (расширенный) — для зарегистрированных, также ваши вариации. Создать для анонимных пользователей профиль Plain, где отметить автоматическое изменение html текста в простой формат.

Немного из обзора друпал 7, такой мини положительный отзыв.
В семерке по умолчанию есть поле для загрузки рисунков. Очень полезная фишка. Каждому материалу можно присвоить картинку – своеобразный логотип. В анонсе эта картинка автоматически уменьшится.

Какие проблемы встречаются при работе с редактором

CKeditor показывает не все кнопки

Для этого проверьте, какую версию вы скачали на странице https://ckeditor.com/download

В пакете Basic Package — кнопок мало.
Standard Package — их больше.
Полный набор в пакете Full Package — скачивайте его, если хотите задействовать максимум.

Установка и настройка файлового менеджера Elfinder для Drupal 7

Связка из редактора и файлового менеджера сделают вашу работу наиболее приятной. Вы сможете в любое место вставить изображение с сервера или с компьютера. Присвоить ему нужные атрибуты, альтернативное описание. К сожалению и его нужно устанавливать.
Файловый менеджер CKEditor загрузит не только картинки, но и другие файлы.
Как и с редактором, нужно скачать модуль и скрипт.

Скачать модуль ]]> https://drupal.org/project/elfinder ]]>

Распаковать архив и поместить файлы в папку site/all/modules/elfinder

Скачать скрипт ]]> ]]>

Из последних версий подошло elfinder-1.2.
Затем распакуем архив и поместим файлы в папку site/all/libraries/elfinder
Здесь есть небольшая особенность, папку нужно назвать elfinder.

Настраиваем. Для этого идем admin/config/elfinder – «конфигурация – модули – elFinder – настроить».

В «Root directory» оставляем выбор за «Use system defaults» — по умолчанию в друпал.

Установки по умолчанию admin/config/media/file-system:

На страничке «Содержимое» — admin/content, вы увидите новую вкладку «Файлы». Теперь достаточно по ней кликнуть и вы увидите интерфейс файлового менеджера.

И последний шаг – это объединение редактора с файловым менеджером в один функциональный инструмент.
Выше я уже описала настройку профилей редактора.

Повторюсь:
Выбираем в File browser type — elFinder . При желании здесь же можно поменять папку для загрузки файлов.

Теперь все должно работать, а я никак не пойму, почему этого нет в ядре друпал? Вместо этого несколько вариантов редакторов на любой вкус. Что слишком хорошо. 😉

Новая рабочая связка
drupal 7.21
CKEditor — WYSIWYG HTML editor 7.x 1.13
CKEditor — ckeditor_4.1_standard
elFinder file manager 7.x-0.8
скрипт elFinder — elfinder-1.2

Появляется глюк с добавлением новых пустот () при каждом редактировании.

Выявлено, что глюк появляется при вставке тизера друпал. Если в статье не отделять анонс, то глюка нет.

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

Путь к настройке показа анонса:

Главная » Администрирование » Structure » Типы содержимого » Article » Управлять отображением

Совет. Следует при настройке внешнего вида визуального редактора убрать кнопочку тизер-друпал в обоих профилях.

Статьи для изучения drupal:

Общие понятия для новичков.

Как русифицировать друпал и модули к нему.

Подборка блоговых модулей.

Краткое руководство.

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

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

3. Вставка ссылок. Из коробки диалоговое окно вставки ссылок содержит кучу не нужного и не понятного. Заменяем его плагином Simple link . Как устанавить, смотрим в п.2 . Подключаем (см. п.1) :

Config.extraPlugins = «SimpleLink»;

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

Config.extraPlugins = «SimpleImage»;

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

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

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

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

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

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

Config.extraPlugins = «confighelper»; config.placeholder = «Наш текст»; // текст нашего placeholder

8. Смайлы. За смайлы в CKEditor»e отвечает плагин Insert Smiley , он в ходит в стандартный пакет — Full Package.

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

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

Config.smiley_path = «/sites/default/files/smileys/»;

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

Config.smiley_images = [«smile_1.png»,»smile_2.png»];

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

Config.smiley_descriptions = [«description-1», «description-2»];

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

Config.smiley_columns = 6;

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

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

Config.disableNativeSpellChecker = false;

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

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

Работал я с двумя визуальными редакторами это Tinymce и CK Editor хоть эти два редактора достаточно популярны откровенно скажу, CK Editor мне больше понравился или верней сказать он больше подошел для моих задач. Поэтому здесь мы рассмотрим, как устанавливается именно редактор CK Editor , а я расскажу в другой раз.

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

После завершения загрузки распаковываем скаченный архив, например, в папку libs которая находится в корне сайта. В index.html между тегами подключаем плагин редактора ckeditor.js ну и конечно библиотеку jquery .

HTML

И так, остается создать форму с тестовым полем , с которым и будет взаимодействовать наш редактор.

HTML

В целом по установке все, после загрузки страницы у Вас, в указанном текстовом поле уже должен отобразится текстовый редактор. Данный редактор можно настраивать под свой вкус менять фон рамки редактора или язык, можно задать ширину и высоту окна. Для этого используется файл config.js , который находится в папке libs/ckeditor/ config.js . В этом файле мы можем задать выше перечислимые настройки и многие другие. Подробней на официальном сайте.

Например, с помощью изменений в файле config.js , которые показаны ниже мы изменим язык, цвет рамки и высоту редактора.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.language = «en»; //язык config.uiColor = «#AADC6E»; //цвет рамки config.height = 300; //высота рамки };

Так же можно изменить вид редактора, установив в настройке config.toolbarBasic — минимум или Full — максимум функций редактора. Или же индивидуально настроить редактор с помощью настройки config.toolbar_Basic как показано в примере ниже.

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

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.width = 1050; //ширина окна редактора config.toolbar = «Basic»; //функциональность редактора, Basic-минимум, Full-максимум config.toolbar_Basic = //индивидуальная настройка режима Basic [ [«Bold», «Italic», «-«, «NumberedList», «BulletedList», «-«, «Link», «Unlink»,»-«,»Smiley»] ]; };

Есть возможность группировать кнопки по группам, и снова для этого нужен файл config.js .

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.toolbarGroups = [ { name: «document», groups: [ «mode», «document», «doctools» ] }, { name: «clipboard», groups: [ «clipboard», «undo» ] }, { name: «editing», groups: [ «find», «selection», «spellchecker», «editing» ] }, { name: «forms», groups: [ «forms» ] }, «/», { name: «basicstyles», groups: [ «basicstyles», «cleanup» ] }, { name: «paragraph», groups: [ «list», «indent», «blocks», «align», «bidi», «paragraph» ] }, { name: «links», groups: [ «links» ] }, { name: «insert», groups: [ «insert» ] }, «/», { name: «styles», groups: [ «styles» ] }, { name: «colors», groups: [ «colors» ] }, { name: «tools», groups: [ «tools» ] }, { name: «others», groups: [ «others» ] }, { name: «about», groups: [ «about» ] } ]; };

В целом основные настройки текстового редактора показаны, одно что, мне не понравилось это размер этого редактора, после закачки он весит 4м 265кб что как то многовато. Если Вас так же это напрягает, то можно удалить каталог samples а так же почистить каталог с языками так как она и весит больше всех. В ней очень много языков, которые не используются, поэтому попросту можно их удалить и оставить только те, что нужны, например русский и английский.

Заходим в каталог libs/ckeditor/lang и тут удаляем все файлы кроме нужного для вас языка, например, оставляем: ru.js и en.js . После всех проделанных манипуляций размер уменьшится вдвое, а каталог ckeditor будет иметь вид:

На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.

Фильтруем нежелательные теги из WORD в CKEditor

Хоть CKEditor и позволяет редактировать тексты, но редакторов сложно приучить готовить их сразу на сайте. Потому первая ревизия текста обычно появляется на сайте как результат копирования из редактора MS WORD.

Вот как может выглядеть HTML код после такого копирования:

Совершенно недопустимые прямые стили и указание на семейство шрифтов, куча не нужных тегов <span> и т.п.

CKEditor имеет мощный инструмент фильтрации тегов и их атрибутов. Требуется правильно задать правила. Указанные правила будут действовать не только при сохранении данных, но и при импорте (вставке CTRL+V) из любимого редакторами MS WORD.

Где настроить разрешенные теги и атрибуты для CKEditor

Задаётся настройка изменением параметра конфигурации allowedContent. Это можно сделать через кастомный js файл настроек модуля, или задать прямо в форме конфигурации профиля (/admin/config/content/ckeditor):

Найдите секцию с дополнительными настройками:

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

Правила фильтрации

Чтобы быстро ввести вас в курс дела, я расскажу немного правилах. Более подробно о них вы можете почитать на сайте ckeditor.com в разделе документации.

Формат следующий:

elements [attributes]{styles}(classes)

Сначала вы перечисляете теги, а потом то, что вы разрешаете для этих тегов — а именно, какие атрибуты, стили, классы.

Например, следующее правило разрешает картинки с обязательным атрибутом srс (используется восклицательный знак), необязательным alt и возможно использование стилей width и height:

img[alt,!src]{width,height}

Все остальные атрибуты и стили будут убраны.

Правила перечисляются через «;», потому вы можете перечислить нужные вам теги и их правила.

Я обычно использую следующее правило:

config.allowedContent = ‘ul li ol h2 h3 h4 b strong i p table tr td th[id,name]; a[!href,id,name];’;

Как видите, никаких <span> и <div>.

Данная запись опубликована в 01.07.2018 19:27 и размещена в drupal. Вы можете перейти в конец страницы и оставить ваш комментарий.

Базовая конфигурация

— Документация CKEditor 4

Содержание

Как изменить конфигурацию CKEditor 4 по умолчанию?
Как мне найти параметры конфигурации CKEditor 4, которые нужно изменить?
Как удалить ненужные функции CKEditor 4?
Как найти примеры кода, показывающие настройку CKEditor 4?
Дополнительная литература

Следующая статья содержит советы по настройке и настройке CKEditor 4, а также некоторые ссылки на более подробные руководства.

Как изменить конфигурацию CKEditor 4 по умолчанию?

CKEditor 4 — это очень гибкий инструмент, который вы можете легко настроить под свои нужды. Если вы хотите изменить конфигурацию редактора, обратитесь к статье «Настройка конфигурации CKEditor 4». Ваша индивидуальная конфигурация поможет вам настроить внешний вид CKEditor 4 в соответствии с требованиями вашего проекта.

Как мне найти настройки конфигурации CKEditor 4, которые нужно изменить?

Полный список параметров конфигурации, которые вы можете изменить, чтобы настроить редактор в соответствии с вашими потребностями, можно найти в API JavaScript CKEditor.Используйте методы, описанные в статье «Настройка конфигурации CKEditor» Руководства разработчика.

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

Как удалить ненужные функции CKEditor 4?

CKEditor 4 — действительно гибкий инструмент с модульной структурой — большинство функций редактора основано на плагинах.Некоторые основные плагины необходимы для работы редактора или зависят друг от друга, однако есть множество дополнительных плагинов, которые вы можете пропустить, когда вам не нужны предоставляемые ими функциональные возможности.

Помните, что одним из наиболее важных приемов CKEditor является настройка сборки вашего редактора с помощью онлайн-конструктора и удаление ненужных функций до того, как они попадут в ваш пакет. Это плохая практика — загружать полный пакет, а затем удалять плагины или кнопки в вашей конфигурации.Вы будете загружать только ненужные вещи без уважительной причины. Ознакомьтесь с 4 распространенными ошибками при установке CKEditor и как их избежать, чтобы получить более подробное объяснение этой практики.

Если вы, однако, хотите отключить некоторые функции, которые поступают из подключаемого модуля CKEditor 4 и все еще присутствуют в вашей сборке, вы можете использовать параметр removePlugins , чтобы предотвратить загрузку подключаемого модуля.

  // Удаляем один плагин.
config.removePlugins = 'путь к элементам';

// Удаляем несколько плагинов.config.removePlugins = 'путь к элементам, сохранение, шрифт';

Не забудьте использовать онлайн-конструктор, чтобы загрузить действительно настроенную версию CKEditor 4!

Как найти примеры кода, показывающие настройку CKEditor 4?

Примеры CKEditor был создан, чтобы представить широкий спектр существующих функций, сценариев использования и параметров настройки для CKEditor 4. Каждый пример содержит краткое описание и ссылки, а также один или несколько экземпляров CKEditor 4, с которыми можно поиграть.Прокрутите вниз до пункта «Получить образец исходного кода» каждого образца, чтобы просмотреть исходный код, готовый к копированию и внедрению в ваше собственное решение.

На рисунке ниже представлен один из примеров CKEditor 4 Создание математических формул с помощью MathJax, открытый в браузере.

Дополнительная литература

Дополнительные сведения о конфигурации CKEditor 4 см. В следующих ресурсах:

Конфигурация панели инструментов

— Документация по CKEditor 4

Содержание

Конфигуратор панели инструментов
1. Базовый конфигуратор панели инструментов
2. Расширенный конфигуратор панели инструментов
Демонстрация настраиваемой панели инструментов
Сопутствующие функции

Хотя CKEditor 4 может быть полнофункциональным редактором WYSIWYG, не все его возможности быть необходимо во всех случаях.Из-за этого настройка панели инструментов является одним из наиболее распространенных требований.

Наиболее рекомендуемый подход к настройке редактора в соответствии с вашими потребностями — это начать с создания пользовательской сборки, удалив нежелательные функции еще до того, как они попадут на панель инструментов. Это плохая практика — загружать полный пакет, а затем удалять плагины или кнопки в вашей конфигурации. Вы будете загружать только ненужные вещи без уважительной причины.

Существует несколько подходов к настройке панели инструментов CKEditor 4 на выбор:

Конфигуратор панели инструментов

был представлен в CKEditor 4.5 и доступен в каждом официальном установочном пакете CKEditor 4.

Новая утилита панели инструментов, которую вы можете найти в своем дистрибутиве CKEditor 4, упрощает настройку доступной панели инструментов.
Это наиболее рекомендуемый способ настройки панели инструментов редактора .

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

Чтобы открыть конфигуратор панели инструментов, перейдите в папку / samples / вашей установки CKEditor 4 и откройте файл index.html в своем браузере. Вы должны увидеть рабочий образец CKEditor 4, который подтверждает, что установка прошла успешно.

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

Доступны два типа конфигуратора панелей инструментов: базовый , более наглядный и расширенный . Редактор, показанный в конфигураторе панели инструментов, содержит все функции и кнопки, доступные в конкретной сборке CKEditor 4.

Базовый конфигуратор панели инструментов

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

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

Расширенный конфигуратор панели инструментов

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

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

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

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

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

Размер редактора

— Документация CKEditor 4

Ширину и высоту классического редактора можно настроить в соответствии с его контекстом и предполагаемым использованием. По умолчанию ширина редактора равна ширине его элемента-контейнера на странице, а его высота установлена на 200 пикселей. Вот несколько ситуаций, в которых вы можете рассмотреть возможность изменения значений по умолчанию:

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

Самый простой способ добиться этого — использовать параметры CKEDITOR.config.width и CKEDITOR.config.height для настройки размера пользовательского интерфейса редактора.

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

Ширина редактора

КРЕДИТОР.Параметр config.width устанавливает внешний размер всего интерфейса редактора, включая границу. Этот параметр конфигурации принимает целое число (для обозначения значения в пикселях) или любые единицы длины, определенные CSS, включая процент (% ).

Например:

  ширина конфигурации = 500; // Ширина 500 пикселей.
config.width = '75% '; // Единица CSS (проценты).

Высота редактора

Параметр CKEDITOR.config.height устанавливает высоту области редактирования с содержимым CKEditor 4 — он не включает панель инструментов или нижнюю панель.Этот параметр конфигурации принимает целое число (для обозначения значения в пикселях) или любые единицы длины, определенные CSS, за исключением значений в процентах (% ), которые не поддерживаются.

Например:

  конфиг. Высота = 500; // Высота 500 пикселей.
config.height = '25em'; // Единица CSS (em).

Альтернативные решения

Редактор также может быть настроен на автоматическое регулирование его высоты в соответствии с размером содержимого, введенного в его область редактирования, благодаря дополнительному плагину Auto Grow.

Кроме того, подключаемый модуль Editor Resize предоставляет множество вариантов изменения размера для классического редактора, включая ручку изменения размера вручную, установку минимальных и максимальных размеров редактора после изменения размера или влияния на направление изменения размера. Он даже позволяет изменять размер редактора на лету!

Демонстрационный размер редактора

См. Рабочий пример «Настройка размера редактора», в котором демонстрируется экземпляр редактора с измененными размерами.

Дополнительные сведения об изменении размера редактора см. В следующих ресурсах:

Функция Auto Grow позволяет редактору автоматически расширяться и сжиматься по вертикали в зависимости от количества и размера содержимого, введенного в его область редактирования.
В статье «Настройка изменения размера редактора» объясняется ряд параметров изменения размера классического редактора, включая изменение размера редактора «на лету».

UI Language — CKEditor 4 Documentation

CKEditor 4 переведен на 70 языков и по умолчанию отображается на языке пользователя (установленном в браузере или настройки операционной системы).Если соответствующая языковая версия недоступна, пользовательский интерфейс редактора будет отображаться на языке по умолчанию (чаще всего: английский).

Обратите внимание, что локализации CKEditor 4 в основном предоставляются нашим замечательным сообществом через Центр перевода пользовательского интерфейса CKEditor, поэтому, если вы хотите помочь с переводом CKEditor 4 на свой родной язык или исправить существующую локализацию, не стесняйтесь присоединяться к нам!

Установка языка по умолчанию

Разработчик веб-сайта может установить язык по умолчанию, который будет использоваться для пользовательского интерфейса CKEditor, если язык пользователя недоступен.Английский язык является здесь настройкой по умолчанию, но вы можете настроить его в соответствии со своими потребностями, изменив параметр конфигурации CKEDITOR.config.defaultLanguage.

Например, если ваш веб-сайт ориентирован на немецкую аудиторию, вы можете также установить немецкий язык пользовательского интерфейса CKEditor по умолчанию:

  config.defaultLanguage = 'de';

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

Переопределение языковых настроек пользователя

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

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

Если вы хотите определить язык, который будет отменять все пользовательские настройки, используйте CKEDITOR.config.language параметр конфигурации.

Например, если ваш веб-сайт на немецком языке и вы хотите отображать немецкоязычную версию пользовательского интерфейса CKEditor для всех посетителей (независимо от их языковых настроек), используйте следующий параметр:

  config.language = 'де';

Это приведет к тому, что интерфейс CKEditor 4 будет отображаться на немецком языке для всех пользователей, переопределив их настройки, сохраненные в браузере.

Демонстрация языков пользовательского интерфейса

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

Обзор функций

— Документация CKEditor 4

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

Раздел «Обзор функций» разделен на две части: Функции для конечного пользователя и Функции интеграции .

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

Функции для конечного пользователя

В этой части описаны функции, предназначенные для конечных пользователей и влияющие на их общий опыт редактирования. Проверьте это, чтобы узнать о таких аспектах, как:

Пользовательский интерфейс — Настройка цвета и языка пользовательского интерфейса редактора.
Редактор Изменение размера — Изменение размеров редактора и его автоматическая подгонка размера под содержимое.
Вставка изображений — Добавление изображений с помощью трех доступных официальных плагинов изображений.
Вставка содержимого — Добавление элементов форматированного текста, таких как фрагменты кода, таблицы, математические формулы, встроенные медиаресурсы и т. Д., И вставка содержимого из Microsoft Word и Excel.
Стили и форматирование — Работа со стилями и форматированием текста.
Работа с документом — Редактирование исходного кода контента или использование связанных с документом функций, таких как волшебная линия или проверка орфографии.
Accessibility Support — Утилиты, которые делают работу с CKEditor 4 доступной для людей с ограниченными возможностями.

Возможности интеграции

В этой части описываются функции, предназначенные для разработчиков, которые реализуют CKEditor 4 и интегрируют его со своими веб-сайтами или приложениями. Обратитесь к нему для получения информации о:

Пользовательский интерфейс редактора — Фиксированный и плавающий пользовательский интерфейс, а также совместное использование пользовательского интерфейса среди множества экземпляров редактора.
Панель инструментов — Настройка панели инструментов редактора.
Использование API — Использование расширенного API CKEditor.
Управление выводом — Регулировка вывода редактора путем установки формата HTML или включения редактора в BBCode.
Утилиты — Дополнительные инструменты, упрощающие настройку и расширение CKEditor 4.

Django CKEditor — документация Django CKEditor 5.3.1

 CKEDITOR_CONFIGS = {
    'дефолт': {
        'кожа': 'луно',
        # 'skin': 'office2013',
        'toolbar_Basic': [
            ["Источник", "-", "Жирный", "Курсив"]
        ],
        'toolbar_YourCustomToolbarConfig': [
            {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},
            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
            {'имя': 'редактирование', 'элементы': ['Найти', 'Заменить', '-', 'Выбрать все']},
            {'имя': 'формы',
             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                       'HiddenField']},
            '/',
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'имя': 'абзац',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Язык']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'имя': 'вставить',
             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},
            '/',
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
            {'name': 'about', 'items': ['About']},
            '/', # поместите это, чтобы установить следующую панель инструментов на новую строку
            {'name': 'yourcustomtools', 'items': [
                # введите имя вашего редактора.ui.addButton здесь
                "Предварительный просмотр",
                "Развернуть",

            ]},
        ],
        'toolbar': 'YourCustomToolbarConfig', # поместите сюда выбранную конфигурацию панели инструментов
        # 'toolbarGroups': [{'name': 'document', 'groups': ['mode', 'document', 'doctools']}],
        # 'высота': 291,
        # 'width': '100%',
        # 'filebrowserWindowHeight': 725,
        # 'filebrowserWindowWidth': 940,
        # 'toolbarCanCollapse': True,
        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-последний / MathJax.js? Config = TeX-AMS_HTML ',
        'tabSpaces': 4,
        'extraPlugins': ','. join ([
            'uploadimage', # функция загрузки изображения
            # здесь ваши дополнительные плагины
            'div',
            'автолинк',
            'autoembed',
            'embedsemantic',
            'autogrow',
            # 'devtools',
            'виджет',
            'lineutils',
            'буфер обмена',
            'диалог',
            'диалоги',
            'elementspath'
        ]),
    }
}

галетахуб / ckeditor: Ckeditor 4.x интеграция с рельсами

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

Характеристики

Установка

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

  драгоценный камень 'ckeditor'

или если вы хотите использовать последнюю версию с Github:

  гем 'ckeditor', github: 'galetahub / ckeditor'

Включите это в свой config / initializers / assets.рб :

  Rails.application.config.assets.precompile + =% w [ckeditor / config.js]

Для поддержки загрузки файлов вы должны сгенерировать необходимые модели файловых хранилищ. В настоящее время поддерживаются следующие серверные ВМ:

ActiveRecord (active_storage, скрепка, несущая волна, стрекоза)
Монгоид (скрепка, несущая волна, стрекоза)

Как создавать модели для хранения загруженных файлов

ActiveRecord + скрепка

Для использования функции active_record со скрепкой (т.е. настройки по умолчанию):

  самоцвет 'скрепка'

рельсы генерируют ckeditor: install --orm = active_record --backend = paperclip

ActiveRecord + active_storage

  самоцвет "mini_magick"

rails active_storage: install # если вы еще не установили active_storage
рельсы генерируют ckeditor: install --orm = active_record --backend = active_storage

ActiveRecord + несущая волна

  драгоценный камень 'carrierwave'
драгоценный камень 'mini_magick'

рельсы генерируют ckeditor: install --orm = active_record --backend = carrierwave

ActiveRecord + стрекоза

Требуется Dragonfly 1.0 или выше.

  самоцвет 'стрекоза'

рельсы генерируют ckeditor: install --orm = active_record --backend = dragonfly

Mongoid + скрепка

  gem 'mongoid-paperclip', требуется: 'mongoid_paperclip'

рельсы генерируют ckeditor: install --orm = mongoid --backend = paperclip

Монгоид + active_storage

Active Storage поддерживает только Active Record, см. Дополнительную информацию

Монгоид + несущая

  драгоценный камень 'несущая волна-монгоид', требуется: 'несущая волна / монгоид'
драгоценный камень 'mini_magick'

рельсы генерируют ckeditor: install --orm = mongoid --backend = carrierwave

Загрузить сгенерированные модели

Все модели ckeditor будут созданы в каталоге app / models / ckeditor.В Rails 4 модели загружаются автоматически. Для более ранних версий Rails вам необходимо добавить их в путь автозагрузки (в application.rb):

 config.autoload_paths + =% w (# {config.root} / app / models / ckeditor)

Установите Ckeditor :: Engine в свои маршруты (config / routes.rb):

 крепление Ckeditor :: Engine => '/ ckeditor'

Использование

Загрузить редактор через CKEditor CDN

Установите версию редактора для загрузки (подробнее здесь http://cdn.ckeditor.com/)

 # в config / initializers / ckeditor.rb

Ckeditor.setup do | config |
  # //cdn.ckeditor.com///ckeditor.js
  config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"
конец

В шаблоне просмотра включен ckeditor CDN:

 = javascript_include_tag Ckeditor.cdn_url

Предварительно скомпилируйте ckeditor / config.js:

 # в config / initializers / assets.rb

Rails.application.config.assets.precompile + =% w [ckeditor / config.js]

Помощники по формам

 = form_for @page do | form |
  = форма.cktext_area: примечания, класс: 'someclass', ckeditor: {язык: 'uk'}
  = form.cktext_area: content, value: 'Значение по умолчанию', id: 'sometext'
  = cktext_area: page,: info, cols: 40, ckeditor: {uiColor: '# AADC6E', панель инструментов: 'mini'}

Также работает с бутстрап-формой

 = bootstrap_form_for ресурс do | form |
  = form.cktext_area: text, ckeditor: {language: 'uk'}

Настроить ckeditor

Все варианты ckeditor можно найти здесь

Чтобы настроить параметры ckeditor по умолчанию, создайте следующие файлы:

  приложение / активы / javascripts / ckeditor / config.js

приложение / активы / javascripts / ckeditor / contents.css

Пример настраиваемых панелей инструментов

Добавление настраиваемой панели инструментов:

 # в app / assets / javascripts / ckeditor / config.js

CKEDITOR.editorConfig = function (config) {
  // ... другая конфигурация ...

  config.toolbar_mini = [
    [«Жирный», «Курсив», «Подчеркнутый», «Зачеркнутый», «-», «Подстрочный индекс», «Надстрочный индекс»],
  ];
  config.toolbar = "мини";

  // ... остальная часть исходного config.js ...
}

При замене конфигурации по умолчанию config.js , вы должны установить все параметры конфигурации самостоятельно, так как прилагаемый файл config.js не будет загружен. Чтобы увидеть конфигурацию по умолчанию, запустите пакет , open ckeditor , скопируйте app / assets / javascripts / ckeditor / config.js в свой проект и настройте его в соответствии с вашими потребностями.

Установить дополнительные плагины

Вы должны загрузить необходимые плагины со всеми зависимостями и извлечь их в app / assets / javascripts / ckeditor / plugins / . После этого вы можете включить свои плагины в app / assets / javascripts / ckeditor / config.js таким образом:

 CKEDITOR.editorConfig = function (config) {
  config.extraPlugins = 'eqneditor, автосохранение,';
}

AJAX

Пример jQuery:

Интеграция с Formtastic

 = форма.ввод: контент, как:: ckeditor
= form.input: content, как:: ckeditor, input_html: {ckeditor: {height: 400}}

Интеграция SimpleForm

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

, т.е. config.toolbar_mini становится в форме {toolbar: ‘mini’}.

 = form.input: content, как:: ckeditor, input_html: {ckeditor: {toolbar: 'Full'}}

Интеграция Turbolink

Создайте файл app / assets / javascripts / init_ckeditor.кофе

 готово = ->
  $ ('. ckeditor'). каждый ->
    CKEDITOR.replace $ (this) .attr ('id')

$ (документ) .ready (готов)
$ (document) .on ('page: load', готово)

Убедитесь, что файл загружен из вашего приложения / assets / javascripts / application.js

Интеграция с CanCanCan

Чтобы использовать cancan с Ckeditor, добавьте это в инициализатор:

 # в config / initializers / ckeditor.rb

Ckeditor.setup do | config |
  config.authorize_with: cancancan
конец

На этом этапе вся авторизация не удастся, и никто не сможет получить доступ к страницам файлового браузера.Чтобы предоставить доступ, добавьте следующие способности (обычно ility.rb )

 # Выполняется всегда
can: access,: ckeditor # необходимо для доступа к файловому браузеру Ckeditor

# Проведены проверки действий:
can [: read,: create,: destroy], Ckeditor :: Изображение
может [: читать,: создать,: уничтожить], Ckeditor :: AttachmentFile

Интеграция с Pundit

Как и CanCanCan, вы можете написать этот код в файле config / initializers / ckeditor.rb:

 Ckeditor.setup do | config |
  config.authorize_with: pundit
конец

Затем сгенерируйте файлы политики для модели Изображение и AttachmentFile

  $ рельсы g ckeditor: pundit_policy

По этой команде вы получите два файла:

приложение / политики / ckeditor / picture_policy.rb приложение / политики / ckeditor / attachment_file_policy.rb

По умолчанию только зарегистрированный пользователь может получить доступ к моделям (с помощью действий index и создать ), и только владелец актива может уничтожить ресурс.

Вы можете настроить эти два файла политик по своему усмотрению.

Конфигурация двигателя

Чтобы переопределить маршруты CKEditor по умолчанию, создайте файл config.js в главном приложении по адресу app / assets / javascripts / ckeditor / config.js
По умолчанию ядро наследуется от ApplicationController . Чтобы переопределить родительский контроллер по умолчанию:

  # в config / initializers / ckeditor.rb

Ckeditor.setup do | config |
  config.parent_controller = 'MyCKEditorBaseController'
конец

Исходя из этого, если вы хотите защитить действия контроллера CKEditor и не можете пройти аутентификацию в ApplicationController, вы можете сделать это с помощью настраиваемого контроллера после настройки вышеупомянутого переопределения, например:

  класс MyCKEditorBaseController

`I18n`

 ru:
  ckeditor:
    page_title: 'Диспетчер файлов CKEditor'
    confirm_delete: 'Удалить файл?'
    кнопки:
      cancel: «Отменить»
      upload: "Загрузить"
      удалить: «Удалить»
      next: 'Далее'

`Тесты`

 $> рейк-тест CKEDITOR_BACKEND = скрепка
$> рейк-тест CKEDITOR_BACKEND = active_storage
$> рейк-тест CKEDITOR_BACKEND = несущая волна
$> рейк-тест CKEDITOR_BACKEND = стрекоза
$> рейк-тест CKEDITOR_BACKEND = храм
$> рейк-тест CKEDITOR_ORM = mongoid

$> rake test: контроллеры
$> rake test: генераторы
$> rake test: интеграция
$> тест рейка: модели

Этот проект качается и использует ЛИЦЕНЗИЮ MIT.

Ckeditor настройка: Настройка CKEditor под себя — подключение плагинов, удаление кнопок

Как я настраивал CKEditor… | Dru.io

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

Установка CKEditor

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

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

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

Настройка CKEdit или как убрать лишние значки на панели

Как делаю я?

Комментарии

Инструкция к редактору CKEditor (FCKeditor)

Описание CKeditor (FCKeditor)

Форматирование текста

Сервисы CKeditor (FCKeditor)

Стили шрифта

Структурирование текста

Выравнивания текста

Вставка ссылок, изображений, таблиц

Изображения

Изменение изображения

Ссылка

Выбор изображения на сервере, загрузка изображенйи на сервер.

Таблицы

Создание таблицы

Свойства таблицы

Расширенный

Работа с таблицами

Редактирование строк таблицы

Редактирование столбцов таблицы

Редактирование ячейки таблицы

Свойства ячейки

Ссылки

Цель

Источник

Ограничения

Установка и настройка текстового редактора CKEditor

Установка визуального редактора CKEditor. Настройка CKEdit или как убрать лишние значки на панели Ckeditor установка

Руководство пользователя: как установить и настроить редактор ckeditor в друпал 7. Загрузка изображений с Elfinder.

Как установить WYSIWYG редактор CKEditor на последнюю версию CMS Drupal 7.17

Настройка профилей редактора CKEditor

Какие проблемы встречаются при работе с редактором

CKeditor показывает не все кнопки

Установка и настройка файлового менеджера Elfinder для Drupal 7

Появляется глюк с добавлением новых пустот () при каждом редактировании.

Фильтруем нежелательные теги из WORD в CKEditor

Где настроить разрешенные теги и атрибуты для CKEditor

Правила фильтрации

— Документация CKEditor 4

Содержание

Как изменить конфигурацию CKEditor 4 по умолчанию?

Как мне найти настройки конфигурации CKEditor 4, которые нужно изменить?

Как удалить ненужные функции CKEditor 4?

Как найти примеры кода, показывающие настройку CKEditor 4?

Дополнительная литература

— Документация по CKEditor 4

Содержание

Базовый конфигуратор панели инструментов

Расширенный конфигуратор панели инструментов

— Документация CKEditor 4

Оглавление

Ширина редактора

Высота редактора

Альтернативные решения

Демонстрационный размер редактора

UI Language — CKEditor 4 Documentation

Оглавление

Установка языка по умолчанию

Переопределение языковых настроек пользователя

Демонстрация языков пользовательского интерфейса

— Документация CKEditor 4

Функции для конечного пользователя

Возможности интеграции

Django CKEditor — документация Django CKEditor 5.3.1

галетахуб / ckeditor: Ckeditor 4.x интеграция с рельсами

Характеристики

Установка

Как создавать модели для хранения загруженных файлов

ActiveRecord + скрепка

ActiveRecord + active_storage

ActiveRecord + несущая волна

`I18n`

`Тесты`

`Добавить комментарий Отменить ответ`