CKEDITOR - как добавить постоянное событие onclick?

Я ищу способ сделать контент CKEDITOR WYSIWYG интерактивным. Это означает, например, добавление некоторых событий onclick к определенным элементам. Я могу сделать что-то вроде этого:

CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');

после обработки этого действия он работает хорошо. Но, Следовательно, если я изменю режим на исходный режим, а затем вернусь в режим wysiwyg, javascript не будет работать. Действие onclick по-прежнему отображается в исходном режиме, но не отображается внутри элемента textarea.

однако интересно, что это отлично работает каждый раз:

CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');

и он также не отображается внутри элемента textarea! Как это возможно? Каков наилучший способ работы с событиями onclick и onmouse элементов контента CKEDITOR?

Я попытался вручную написать это в исходном режиме:

    <html>
    <head>
        <title></title>
    </head>
    <body>
        <p>
            This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
    </body>
</html>

и Javascript (действие onclick) не работает. Есть идеи?

Спасибо большое!

мой последний решение:

               editor.on('contentDom', function() {
                var elements = editor.document.getElementsByTag('span');
                for (var i = 0, c = elements.count(); i < c; i++) {
                    var e = new CKEDITOR.dom.element(elements.$.item(i));
                    if (hasSemanticAttribute(e)) {
                        // leve tlacitko mysi - obsluha
                        e.on('click', function() {
                            if (this.getAttribute('class') === marked) {
                                if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
                                    this.removeAttribute('class');
                                } else {
                                    this.setAttribute('class', marked_unique);
                                }
                            } else if (this.getAttribute('class') === marked_unique) {
                                this.removeAttribute('class');
                            } else {
                                this.setAttribute('class', marked);
                            }
                        });
                    }
                }
            });
6
ckeditor events

1 ответов

фильтрация (только CKEditor > =4.1)

этот атрибут удаляется, потому что CKEditor не разрешает его. Эта система фильтрации называется Advanced Content Filter, и вы можете прочитать об этом здесь:

короче - вам нужно настроить редактор, чтобы позволить onclick атрибуты на отдельные элементы. Например:

CKEDITOR.replace( 'editor1', {
    extraAllowedContent: 'strong[onclick]'
} );

подробнее здесь: config.extraAllowedContent.

on* атрибуты внутри CKEditor

CKEditor кодирует on* атрибуты при загрузке содержимого, чтобы они не нарушали функции редактирования. Например, onmouseout становится data-cke-pa-onmouseout внутри редактора, а затем, при получении данных из редактора, эти атрибуты декодируется.

нет параметр конфигурации для этого, потому что это не имеет смысла.

Примечание: поскольку вы устанавливаете атрибут для элемента внутри редактируемого элемента редактора, вы должны установить его в защищенный формат:

element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );

кликабельные элементы в CKEditor

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

editor.on( 'contentDom', function() {
    var element = editor.document.getById( 'foo' );
    editor.editable().attachListener( element, 'click', function( evt ) {
        // ...

        // Get the event target (needed for events delegation).
        evt.data.getTarget();
    } );
} );

проверьте документацию для editor#contentDom событие что очень важно в таких случаях.

11