Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

26th
Фев

Настройка CKEditor и нестандартные теги

Posted by maloy under JavaScript

Vasiatka

Хочу реализовать обработку тега <cut /> для СKEditor.

Нарисовал плагин:

Код:


CKEDITOR.plugins.add( 'pagecut',
{
    init: function( editor )
    {	    
            CKEDITOR.addCss("cut {display:block; height: 2px;width: 100%;background: #DDDD99;}");

            editor.addCommand( 'insertPagecut',
            {
                exec: function( editor )
                {                                    
                    var element = CKEDITOR.dom.element.createFromHtml( '<cut />' );
		    element.unselectable();
                    editor.insertElement( element );
                }
            });

            editor.ui.addButton( 'Pagecut',
            {
                label: 'Вставить кат',
                command: 'insertPagecut',
                icon: this.path + 'images/icon.png'
            } );
    }
} );

В редакторе все работает, но есть одна загвоздка. В редакторе при вставке тега происходит обработка. и в результате в html появляется такая вещь:

Код HTML:

<p>Это текст одного абзаца, тут ставим кат,<cut></cut>он оказывается в середине абзаца</p>

Вопрос.
1. Как отключить обработку тега? (Нужно чтобы в редакторе вставлялось именно <cut />)
2. Тег оказался в середине абзаца. Как запретить это? Тег не должен быль внутри других тегов.

Vasiatka

В общем перерыл всю документацию по редактору. Уже было совсем решил бросить эту затею… Но тут мой взгляд упал на строки:

Цитата:

CKEDITOR.dtd
Holds and object representation of the HTML DTD to be used by the editor in its internal operations.
Each element in the DTD is represented by a property in this object. Each property contains the list of elements that can be contained by the element. Text is represented by the # property.

Эврика!!! Копать сюда.

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

Код:


CKEDITOR.dtd.$empty['cut']=1;//самозакрывающийся тег
CKEDITOR.dtd.$nonEditable['cut']=1;//запрет редактирования
CKEDITOR.dtd.$object['cut']=1;//тег, является объектом, выделяется только целиком

Однако на этом помощь документации закончилась…
Но осталось запретить наследование моего тега другими элементами. Ну думаю, копать-то уже понятно куда. Открыл исходники, нашел описание dtd и выяснилось, что надо добавить еще строку:

Код:


CKEDITOR.dtd['cut']={};

В итоге плагин стал вести себя так как задумывалось:

Конечный вариант такой:

Код:


CKEDITOR.plugins.add( 'pagecut',
{
    init: function( editor )
    {	    
            CKEDITOR.addCss("cut {display:block; height: 2px;width: 100%;background: #DDDD99;}");
	    CKEDITOR.dtd['cut']={};
	    CKEDITOR.dtd.$empty['cut']=1;
	    CKEDITOR.dtd.$nonEditable['cut']=1;
	    CKEDITOR.dtd.$object['cut']=1;
            editor.addCommand( 'insertPagecut',
            {
                exec: function( editor )
                {                                    
                    var element = CKEDITOR.dom.element.createFromHtml( '<cut />' );
		   // element.unselectable();
                    editor.insertElement( element );
                }
            });

            editor.ui.addButton( 'Pagecut',
            {
                label: 'Вставить кат',
                command: 'insertPagecut',
                icon: this.path + 'images/icon.png'
            } );
    }
} );

Я довольно сильно напрягся, чтобы найти решение. Поэтому поэтому добавил его сюда, и надеюсь, что оно кому-то пригодится.

тема на форуме

Последние записи

Настройка CKEditor и нестандартные теги

Похожие статьи

Купить рекламу на сайте за 1000 руб

пишите сюда - alarforum@yandex.ru