Обзор редактора HTML кода CKEditor 5

CKEditor - это JavaScript плагин для редактирования HTML-кода. В частности с его помощью можно превратить обычное поле textarea в красивый HTML-редактор.

Плюсы: бесплатный, не требует установки, мало весит, к нему написано много плагинов.

Минусы: чтобы добавить в редактор такие фишки как выделение текста цветом, изменение размера текста и другие, надо использовать плагины. А для их использования нужно пересобирать сборку заново с помощью Node.js. И нет возможности подключить эти плагины просто отдельными JS-файлами.

Живет здесь: ckeditor.com

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

Запуск

Рассмотрим пример подключения Inline сборки.

Подключаем скрипт с CDN:

<script src='https://cdn.ckeditor.com/ckeditor5/29.2.0/inline/ckeditor.js'></script>

HTML основой для редактора может быть любой блок, но сами разработчики рекомендуют обычный div:

<div id='editor'></div>

Запускаем редактор:

InlineEditor
	.create( document.querySelector( '#editor' ) )
	.catch( error => {
		console.error( error );
	} );

Если нужно запустить несколько версий редактора одновременно:

$( '.editor' ).each( function() {
	InlineEditor
		.create( this )
		.catch( error => {
			console.error( error );
		} );
});

Настройка

Настраиваем список кнопок в панели редактора

InlineEditor
	.create( document.querySelector( '#editor' ), {
		toolbar: {
			items: [ 'heading', 'Bold', 'Italic', 'NumberedList', 'BulletedList', 'Blockquote', 'Link', 'insertTable', 'Undo', 'Redo' ],
			shouldNotGroupWhenFull: true
		}
	} )
	.catch( error => {
		console.error( error );
	} );

Кнопки можно разделять вертикальной чертой используя '|' или переносить на новую строку используя '-'.

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

При запуске плагина выводим его созданный экземпляр в консоль:

InlineEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor => {
		console.log( 'Editor was initialized', editor );
	} )
	.catch( err => {
		console.error( err.stack );
	} );

И после вывода экземпляра в консоль, смотрим список его команд. Вот их перечень:

'enter', 'deleteForward', 'forwardDelete', 'delete', 'selectAll', 'shiftEnter', 'input', 'undo', 'redo', 'bold', 'italic', 'blockQuote', 'link"', 'unlink', 'ckfinder', 'uploadImage', 'imageUpload', 'paragraph', 'insertParagraph', 'heading', 'insertImage', 'imageInsert', 'imageTypeBlock', 'imageTextAlternative', 'imageTypeInline', 'toggleImageCaption', 'imageStyle', 'indent', 'outdent', 'numberedList', 'bulletedList', 'indentList', 'outdentList', 'mediaEmbed', 'insertTable', 'insertTableRowAbove', 'insertTableRowBelow', 'insertTableColumnLeft', 'insertTableColumnRight', 'removeTableRow', 'removeTableColumn', 'splitTableCellVertically', 'splitTableCellHorizontally', 'mergeTableCells', 'mergeTableCellRight', 'mergeTableCellLeft', 'mergeTableCellDown', 'mergeTableCellUp', 'setTableColumnHeader', 'setTableRowHeader', 'selectTableRow', 'selectTableColumn'

Подключаем русский язык

Для этого дополнительно подключаем скрипт русского перевода:

<script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/inline/translations/ru.js"></script>

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

И затем при запуске редактора в настройках указываем язык:

InlineEditor
	.create( document.querySelector( '#editor' ), {
		language: 'ru'
	} )
	.catch( error => {
		console.error( error );
	} );

Читаем данные из редактора

Получить HTML-код из редактора можно обычными средствами JS, просто прочитав HTML того блока, в котором запущен редактор. Или же можно получить встроенными средствами плагина с помощью метода getData():

let myEditor;
InlineEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor  => {
		myEditor = editor ;
	} )
	.catch( error => {
		console.error( error );
	} );
$( document ).on( 'focusout', '#editor', function() {
	console.log( myEditor.getData() );
});

В этом примере мы выводим HTML-код из редактора в консоль, после того как он теряет фокус.