Как добавить нестандартный тег в CKEditor?

Question

[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 появляется такая вещь:

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

Как отключить обработку тега и запретить его размещение внутри других тегов?

Нужно чтобы в редакторе вставлялось именно <cut /> . И тег не должен быль внутри других тегов.

Answer 1

[vasiatka]

Сам разобрался. Решил поделиться. Решением. За требуемое поведение тегов отвечает dtd. В метод добавил строки:

CKEDITOR.dtd['cut']={};
	    CKEDITOR.dtd.$empty['cut']=1;
	    CKEDITOR.dtd.$nonEditable['cut']=1;
	    CKEDITOR.dtd.$object['cut']=1;

Строка 1. не дает наследовать этот элемент;
Строка 2. Самозакрывающийся тег;
Строка 3. Запрет редактирования;
Строка 4. Объект можно выделить только полностью.

В целом я удовлетворился вот таким вариантом плагина https://yadi.sk/d/51oEeVCMfvabV

Answer 2

[Виталий]

Почти сработало. Только когда повторно открываю документ <cut/> меняется на <p>&nbsp;</p>

Comments

[treyer]

вставил строки Bиталия
CKEDITOR.dtd['cut']={};
CKEDITOR.dtd.$empty['cut']=1;
CKEDITOR.dtd.$nonEditable['cut']=1;
CKEDITOR.dtd.$object['cut']=1;
в config.js - при повторном открытии документа всё работает почти как надо :) - вставляется кастомный тег.... НО, возникал проблема, которая заключается в том, что тег нельзя удалить в обычном режиме редактирования, а в режиме "соурс" тег удаляется посимвольно

[treyer]

treyer: p.s.: использовал не предложенный Виталием тег , а тег с соответствующими изменениями кода плагина, поскольку при применении тега или даже у меня несмотря на наличие собственного изображения для моей кастомной кнопки использовался рисунок с изображением ножниц от самого ckeditor не смотря на многочисленные пробы переписать путь к картинке в моём плагине как-то по-другому...

Answer 3

[Артур Гранд]

Не знаю, дойдет ли это сообщение, но все же...
vasiatka, у вас получилось до конца доделать функционал этого модуля, что бы он в самом редакторе не глючил?

Comments

[vasiatka]

Написал, выше. Для меня это все уже давно просто хобби. Удовлетворился плагином вот в таком виде https://yadi.sk/d/51oEeVCMfvabV
На тот момент меня вроде поведение устраивало. С невозможностью удаления тега в режиме редактирования не разбирался.

[Артур Гранд]

vasiatka: о, про проблему удаления даже не заметил. у меня этот код вообще оборачивал параграфы нижележание и мешал их созданию правильному
gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

временно заменил на

[Артур Гранд]

тег сожрался < hr id="cut" />

[vasiatka]

Порылся, вроде проблему удаления тега решает строка
CKEDITOR.dtd.$editable['cut']=1;
Добавил в архив

[vasiatka]

artygrand: Это с тем плагином, что в архиве? у меня вроде работает

[Артур Гранд]

вот переписанный малость мною
stackoverflow.com/questions/29581028/ckeditor-cust...

[vasiatka]

artygrand: ну дак все заработало?

[Артур Гранд]

нет, но уже пофиг, длинный тег прижился

[Артур Гранд]

vasiatka: спустя пол месяца я таки наговнокодил. работает, удаляется, не ломает верстку редактора. Спасибо за то, что положил начало плагину. https://github.com/artygrand/CKEditor-pagecut-plug...