Интеграция WYSIWYG

Интеграция WYSIWYG редактора

KodiCMS позволяет интегрировать в себя любой HTML редактор текста, кода и т.д. Процесс интеграции включает в себя неколько этапов:

1. Написание JavaScript скрипта отвечающего за подключение и отключение редактора
2. Регистрация JavaScript кода в системе
3. Для редакторов типа Markdown описание класса - фильтра отвечающего за преобразование текста

JavaScript

Javascript файл можно размещать в любом модуле системы по пути modulename/resources/js/filename.js

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

CMS.ui.add('ckeditor', function() { // регистрация UI компонента

	var $ckeditor = {};

	CKEDITOR.disableAutoInline = true;
	CKEDITOR.config.extraPlugins = 'images-browser';
	CKEDITOR.config.simpleImageBrowserURL = '/api-media.images';

	// Метод вызываемый в момент активации редактора
	$ckeditor.switchOn_handler = function (textarea_id, params) {
		params = $.extend({
			skin: 'bootstrapck',
			filebrowserBrowseUrl: BASE_URL + '/filemanager.popup',
			height: 200
		}, params);
		var editor = CKEDITOR.replace(textarea_id, params);
		return editor;
	};

	// Метод вызываемый в момент деактивации редактора
	$ckeditor.switchOff_handler = function (editor, textarea_id){
		editor.destroy()
	}

	// Метод вызываемый в момент передачи параметров в редактор
	$ckeditor.exec_handler = function (editor, command, textarea_id, data){
		switch (command) {
			case 'insert':
				editor.insertText(data);
				break;
			case 'changeHeight':
				editor.resize('100%', data);
		}
	}

	// Регистрация филтра в системе на стороне JavaScript. На входе метод add ожидает 4 параметра
	CMS.filters.add('ckeditor', $ckeditor.switchOn_handler, $ckeditor.switchOff_handler, $ckeditor.exec_handler);
});

CMS.filters.add - Регистрация филтра в системе на стороне JavaScript. На входе метод add ожидает 4 параметра

1. Название фильтра по которому он будет доступен для подключения
2. Callback при выборе фильтра (активация редактора)
3. Callback при деактивации редактора
4. Callback при передаче в редактор данных

Регистрация JavaScript кода в системе

Пример:

modulename/resources/packages.php

use KodiCMS\CMS\Assets\Package;

Package::add('ckeditor')
	->js('ckeditor-library', resources_url() . '/libs/ckeditor/ckeditor.js', 'jquery')
	->js(NULL, backend_resources_url() . '/js/ckeditor.js', 'ckeditor-library'); // Файл с нашим скриптом добавления фильтра, который был показан выше

/**
 * @param string $editorId [Идентификатор редактора, должен совпадать с тем, что указали в Javascript коде CMS.filters.add('ckeditor'....]
 * @param string|null $name [Название редактора для выпадающего списка]
 * @param string|null $filter [Класс фильтра, который будет использоваться для преобразования. Должен ]
 * @param string|null $package [Клю медиа пакета по которому на страницу он будет загружен, default: $editorId]
 * @param string $type [Тип редактора (html, code), default: self::TYPE_HTML]
 */
WYSIWYG::add('ckeditor', 'CKEditor');

Класс фильтра

Единственное условие это реализация интерфейса KodiCMS\CMS\Contracts\WysiwygFilterInterface. В метод apply передается строка с текстом, там она преобразуется и возвращается преобразованная строка.

use WYSIWYG;

$html = WYSIWYG::applyFilter('ckeditor', ....);

---

Подключение HTML редактора в шаблоне для нужного поля.

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

Контроллер

use WYSIWYG;

class PageController extends BackendController
{
	...

	public function getEdit($id)
	{
		WYSIWYG::loadDefaultHTMLEditor();
	
		...
	
	}

	...
}

Шаблон

<textarea id="textareaId"></textarea>

@section('scripts')
	@parent
<script>
$(function() {
	// Если необходима передача параметров в редактор
	var params = $('#textareaId').data();

	CMS.filters.switchOn('textareaId', 'ckeditor', params);
});
</script>
@stop

Каждая страница админ панели содержит JavaScript переменные, которые помогут получить идентификатор редактора по умолчанию:

• DEFAULT_HTML_EDITOR - Редактор текста по умолчанию
• DEFAULT_CODE_EDITOR - Редактор кода по умолчанию

Пример использования

CMS.filters.switchOn('textareaId', DEFAULT_HTML_EDITOR, params);

Методы класса WYSIWYG

• getDefaultHTMLEditorId() - идентификатор редактора текста по умолчанию
• isExists($editorId) - Проверка редактора на существование
• isLoaded($editorId) - Проверка подключен ли редактор на страницу
• getUsed() - Список используемых редакторов на странице
• getAvailable() - Получения списка доступных редакторов в системе
• getAvailableByType($type) - Получения списка доступных редакторов определенного типа
• getEditor($editorId) - Получение объекта редактора (KodiCMS\CMS\Contracts\WysiwygEditorInterface)
• loadAllEditors() - Загрузить в шаблон все редакторы
• loadCodeEditors() - Загрузить в шаблон редакторы кода
• loadHTMLEditors() - Загрузить в шаблон редакторы текса
• loadDefaultHTMLEditor() - Загрузить в шаблон редактор текста по умолчанию
• loadDefaultCodeEditor() - Загрузить в шаблон редактор кода по умолчанию
• loadDefaultEditors() - Загрузить в шаблон редакторы по умолчанию
• loadEditor($editorId) - Загрузить редактор в шаблон по идентификатору
• applyFilter($editorId, $text) - Применить фильтр используемый редактором к тексту
• htmlSelect($type = null) - Получение списка редакторов для выпадающего списка
• usedHtmlSelect() - Получение списка редакторов для выпадающего списка подключенных в шаблон

---

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

php artisan cms:wysiwyg:list