На своем сайте использовал BUEditor – простой удобный редактор, но для пользователей он не очень удобен. Часто думал поставить CKEditor, но он мне казался каким-то монстром, но на деле все оказалось не так страшно.
Как установить модуль читаем .
После подключения через свой модуль, на странице 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
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"е, при нажатии ПКМ открывается контекстное меню, а не нативное меню браузера
Download options
There are several options to download CKEditor 5 builds:
After downloading the editor jump to the Basic API guide to see how to create editors.
CDNBuilds can be loaded inside pages directly from , which is optimized for worldwide super fast content delivery. When using CDN no download is actually needed.
npmAll builds are released on npm. Use this search link to view all official build packages available in npm.
Installing a build with npm is as simple as calling one of the following commands in your project:
Npm install --save @ckeditor/ckeditor5-build-classic # Or: npm install --save @ckeditor/ckeditor5-build-inline # Or: npm install --save @ckeditor/ckeditor5-build-balloon # Or: npm install --save @ckeditor/ckeditor5-build-balloon-block # Or: npm install --save @ckeditor/ckeditor5-build-decoupled-document
CKEditor will then be available at node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . It can also be imported directly to your code by require("@ckeditor/ckeditor5-build-") .
Zip downloadGo to the and download your preferred build. For example, you may download the ckeditor5-build-classic-1.0.0.zip file for the Classic editor build.
Extract the .zip file into a dedicated directory inside your project. It is recommended to include the editor version in the directory name to ensure proper cache invalidation once a new version of CKEditor is installed.
Included files- ckeditor.js – The ready-to-use editor bundle, containing the editor and all plugins.
- ckeditor.js.map – The source map for the editor bundle.
- translations/ – The editor UI translations (see Setting UI language).
- README.md and LICENSE.md
After downloading and installing a CKEditor 5 build in your application, it is time to make the editor API available in your pages. For that purpose, it is enough to load the API entry point script:
Once the CKEditor script is loaded, you can
CKEditor это готовый для использования текстовый рекдактор HTML, созданный для упрощения создания содержания веб страниц. Это WYSIWYG редактор который предоставляет функции редактирования текста непосредственно вашим веб страницам.
CKEditor это приложение с открытым исходным кодом, то есть оно может быть измнено по вашему желанию. Его полезность приходит от активного общества, которое не прекращает развитие приложений с бесплатными add-ons и прозрачным процессом развития (transparent development process).
3- Download CKEditor
У вас есть 4 варианта скачивания CKEditor .
Результат скачивания:
Можете посмотреть примеры CKEditor в папке samples :
Все примеры данной статьи содержатся в папке samples в CKEditor который вы скачали. Но я попытаюсь сделать это легче чтобы вам далось легче.
Создать папку myexamples , примеры данной статьи будут находиться в этой папке.
Простой пример использование CKEditor.replace(..) чтобы заменить через CKEditor .
replacebycode.html
Replace Textarea by Code Replace Textarea Elements Using JavaScript Code
Hello CKEditor
CKEDITOR.replace("editor1");Смотрите пример:
Результаты запуска примера:
С имеющие атрибут name, и class ="ckeditor" будет автоматически заменен CKEditor-ом .
Text
replacebyclass.html
Replace Textareas by Class Name Replace Textarea Elements by Class Name
Hello CKEditor
Запуск примера:
4.3- Создать CKEditor с jQueryПример создания CKEditor используя JQuery .
jQuery Adapter — CKEditor Sample $(document).ready(function() { $("#editor1").ckeditor(); }); function setValue() { $("#editor1").val($("input#val").val()); } Create Editors with jQuery
Hello CKEditor
