Как на MODX для редактора CKEditor создать свой плагин Аккордеон (Accordeon)

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

Создание HTML плагина «accordeon» будет выполняться в несколько этапов

1. Подготовка HTML разметки
2. Написание CSS для «accordeon»
3. Написание JS для управления состояниями «свёрнут — развёрнут» или «скрыт — открыт» элементов HTML аккордеона.

В итоге у нас должен получиться HTML аккордеон и кнопка на панели редактора CKEditor

 Итак приступим к работе. Создадим HTML разметку в любом текстовом редакторе. Потом, когда мы будем писать сам плагин мы скопируем этот код в нужный момент.

<div class="accordeon">Заголовок</div>
<div class="panel" style="">
<div>Текст</div>
</div>

Теперь создадим accordeon.css в директории сайта (В какое место на сайте вы сохраните accordeon.cssб, accordeon.js не особо важно, но в тот же момент место должно быть оптимально — интуитивно понятное).

Напишем следующий код

.accordeon {
    background-color: #999;
    color: #FFF;
    width: 100%;
    border: none;
    border-radius: 4px;
    text-align: left;
    outline: none;
    font-size: 16px;
    line-height: 30px;
    padding: 6px 12px;
    transition: 0.25s;
}

.accordeon.active, .accordeon:hover {
    background-color: #777;
}

.accordeon:after {
    content: '\25B6';
    font-weight: bold;
    float: right;
    font-size: 24px;
    transition: 0.45s;
}

.accordeon.active:after {
	transform: rotate(90deg);
}

.panel {
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin: 0;
    text-align: left;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	transition: 0.45s;
	
}

.panel:hover {
	border: 1px solid rgba(96, 125, 139, 0.4);
}
 
.panel>div {
    padding: 6px 10px;
    text-align: justify;
}

Ок. CSS готов. Теперь создадим accordeon.js

var tmpObj = document.getElementsByClassName("accordeon");
for (var i = 0; i < tmpObj.length; i++) {
	tmpObj[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var panel = this.nextElementSibling;
		if (panel.style.maxHeight) {
			panel.style.maxHeight = null;
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
		}
	});
}

Отлично. Мы почти завершили. Осталось дело за малым, создать сам плагин и подключить его. Создадим папку «accordeon» в директории «manager/assets/components/ckeditor/ckeditor/plugins».  В новой папке «accordeon» создадим файл «plugin.js». Так же разместим картинку для кнопки редактора. «accordeonlist.png»  Откроем файл «plugin.js» и напишем следующий код

CKEDITOR.plugins.add( 'accordeon', {
    init: function( editor ) {
        editor.addCommand( 'accAdd', {
             
                exec: function( editor ) {
                    editor.insertHtml('<div class="accordeon">Заголовок</div><div class="panel"><div>'
                  + editor.getSelection().getSelectedText()
                  + '</div></div>&nbsp;');
            }
        });
        editor.ui.addButton( 'accordeonlist', {
            label: 'Вставить аккордеон',
            icon : this.path + 'accordeonlist.png',
            command: 'accAdd',
            toolbar: 'insert'
        });
    }
});

Теперь откроем файл «manager/assets/components/ckeditor/ckeditor/config.js» и добавим указатель на наш новый плагин, т.е. подключим его к редактору CKEditor

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

Вот и всё. Открываем любой ресурс, статью и добавляем аккордеон.

Это простой плагин, но работу свою делает.

Удачи.

Написать комментарий