CKEditor это WYSIWYG-редактор, т. е. «что вижу то и получаю». Этот редактор можно применять, например, в WordPress'е (плагин CKEditor for WordPress), а также в своих собственных скриптах. «На входе» вы работаете в редакторе как, например, бы работали в LibreOffice или в MS Word, а «на выходе» вы получаете HTML-код. Вот так выглядит этот редактор в WordPress'е:

1

Изначально, CKEditor поставляется в трёх пакетах, разница между ними следующая:

Plugin

name

   Basic       Standard       Full   
About CKEditor (about) yes yes yes
Basic Styles (basicstyles) yes yes yes
Clipboard (clipboard) yes yes yes
Editor Toolbar (toolbar) yes yes yes
Enter Key (enterkey) yes yes yes
Escape HTML Entities (entities) yes yes yes
Floating Space (floatingspace) yes yes yes
IFrame Editing Area (wysiwygarea) yes yes yes
Indent List (indentlist) yes yes yes
Link (link) yes yes yes
List (list) yes yes yes
Undo (undo) yes yes yes
Accessibility Help (a11yhelp)   yes yes
Blockquote (blockquote)   yes yes
Context Menu (contextmenu)   yes yes
Editor Resize (resize)   yes yes
Elements Path (elementspath)   yes yes
File Browser (filebrowser)   yes yes
Format (format)   yes yes
Horizontal Rule (horizontalrule)   yes yes
HTML Output Writer (htmlwriter)   yes yes
Image (image)   yes yes
Magic Line (magicline)   yes yes
Maximize (maximize)   yes yes
Paste As Plain Text (pastetext)   yes yes
Paste from Word (pastefromword)   yes yes
Remove Format (removeformat)   yes yes
Show Table Borders (showborders)   yes yes
Source Editing Area (sourcearea)   yes yes
Special Characters (specialchar)   yes yes
SpellCheckAsYouType (SCAYT) (scayt)   yes yes
Styles Combo (stylescombo)   yes yes
Tab Key Handling (tab)   yes yes
Table (table)   yes yes
Table Tools (tabletools)   yes yes
WebSpellChecker (wsc)   yes yes
Advanced Tab for Dialogs (dialogadvtab)     yes
BiDi (Text Direction) (bidi)     yes
Color Button (colorbutton)     yes
Color Dialog (colordialog)     yes
Content Templates (templates)     yes
Div Container Manager (div)     yes
Find / Replace (find)     yes
Flash Dialog (flash)     yes
Font Size and Family (font)     yes
Form Elements (forms)     yes
IFrame Dialog (iframe)     yes
Indent Block (indentblock)     yes
Insert Smiley (smiley)     yes
Justify (justify)     yes
Language (language)     yes
List Style (liststyle)     yes
New Page (newpage)     yes
Page Break (pagebreak)     yes
Preview (preview)     yes
Print (print)     yes
Save (save)     yes
Select All (selectall)     yes
Show Blocks (showblocks)     yes

Т.е. эти пакеты содержат различный функционал (Basic и Standard — усечённый функционал). Но даже пакет Full может быть дополнен дополнительными, очень полезными плагинами, именно о них я сейчас и расскажу. Для своих целей подобрать нужный набор плагинов можно на очень удобной страничке кастомизации (для WordPress'а плагины можно добавить в Панеле управления сайтом, в разделе «Плагины», выбрать «Добавить новый»).

2

1. Base64 Image

Сайт

Каждый, кто оформлял сообщения на форуме, в блоге, в WordPress'е или в самописной CMS, знает, что картинки нужно сначала загрузить на сервер, чтобы иметь возможность вставить их в свой пост. Если вы пишите свою CMS и используете CKEditor, то вам отдельно нужно написать скрипты, которые будут загружать ваши картинки на сервер. Плагин Base64 Image всё меняет, теперь нет необходимости это делать — просто добавляйте ваши картинки, которые будут переведены в строки base64 и сохранены среди HTML-кода. Также можно добавлять внешние ссылки. Выбираем для загрузки файл:

3 

Он вставлен в редактор:

8

Если перейти к просмотру HTML-кода, то можно увидеть следующее:

4

Т.е. мы можем сохранить наше изображение в виде строки, без загрузки файла на сервер.

2. Spoiler

Сайт

Позволяет добавить спойлер, который будет скрывать текст.

spoiler

3. Word Count & Char Count Plugin

Сайт

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

5

4. Media (oEmbed) Plugin

Сайт

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

CkEditorMediaEmbedPlugin_1

5. Code Snippet

Сайт

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

codesnippet_01_0 codesnippet_02 codesnippet_03_0 codesnippet_04_0 codesnippet_05_0 

Для этого плагина есть достойные альтернативы Code Snippet GeSHiCode tag.

6. Font Awesome

Сайт

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

fontawesome1_0 fontawesome2_0 

7. Insert Symbol

Сайт

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

symbol_0

8. Keep TextSelection

Сайт

Плагин который меня потряс! Довольно часто возникает желание посмотреть или исправить HTML-код. Что для этого мы делаем? Мы переключаемся в режим исходного кода и долго ищем нужное нам место. Этот потрясающий плагин здорово облегчает жизнь: в режиме WYSIWYG мы выделяем нужный нам фрагмент, переключаемся в режим исходного кода и сразу попадаем в нужное нам место — причем исхоодный код также выделен:

6 7

9. BBCode Output Format

Сайт

Как упростить оформление сообщений на форумах, на торрент-трекерах, на сайтах, где нет WYSIWYG режима, а есть только BBCode? Для этого есть очень изящное решение, благодаря плагину BBCode Output Format мы можем оформлять наше сообщение в CKEditor и с лёгкостью переносить полученный BBCode на форум или торрент-трекер.

bbcode_01 bbcode_02

10. AutoSave Plugin

Сайт.

Ещё один потрясающий плагин. Он автоматически сохраняет контент (используя HTML5 LocalStorage), например, на случай, когда случайно было закрыто окно браузера или истекла сессия. После сохранения, контент может быть восстановлен, когда снова откроете редактор. 

AutoSaveDiffDialog_0


Кстати, ведь популярный сайт создаёт значительную нагрузку на хостинг. Важно, чтобы ваш хостер обеспечивал устойчивую работу в любых ситуациях, чтобы сайт не «лежал» от отключений электричества в дата центре, частом смене программного обеспечения, частых DdoS-атаках или просто от нагрузок сайтов и т.д. Ведь пользователям это быстро надоест и они уйдут на сайт-конкурент. Я перебрал довольно много решений и нашёл очень хороший вариант — 100 рублей в месяц! За эти деньги даётся профессиональный хостинг, с отличным аптаймом, с бесплатным доменом второго уровня в подарок (!), с 2 гигабайтами места на SSD диске, с неограниченным количеством баз данных, с возможностью подключать неограниченное количество новых доменов (платить придётся только за каждый новый домен — 139 рублей). Вообще, всего хорошего так много, что проще всего посмотреть это здесь.

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


Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net. Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!

Поделитесь этой статьёй с друзьями, если хотите выхода новых статей:

Похожие темы

Новости софта от 26 сентября 2014 года (CKEditor, ... Обычно информация по LibreOffice передвигается в самый низ новости, т. к. эта программа не имеет прямого отношения к Интернету и сетевым технол...
Анализ лог-файлов Apache Источник: https://n0where.net/analyzing-apache-log-files/ В файлах журнала (логах) сервера записаны все запросы к серверу. Расположение и с...
Новости софта от 23 августа 2014 года (PHP, CKEdit... Буквально вчера обновились две линейки PHP. Новые версии имеют номера PHP 5.5.16 и PHP 5.4.32. Списки изменений доступны здесь и здесь. Скачать свеж...
Новости софта от 19 сентября 2014 года (CKEditor f... Все, кто пользуется плагином CKEditor for WordPress и кто успел обновиться на WordPress 4.0 сразу после выхода, уверен, заметили баг, из-за которого...
11 самых полезных плагинов для WordPress’а, ... Итак, вы настроили и запустили первый раз свой сайт на WordPress — всё работает и это отлично! Что теперь? Ну, во-первых, поздравляю с новым с...