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);
}
});
}
}
});
1 ответов
фильтрация (только CKEditor > =4.1)
этот атрибут удаляется, потому что CKEditor не разрешает его. Эта система фильтрации называется Advanced Content Filter, и вы можете прочитать об этом здесь:
- http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
- http://ckeditor.com/blog/CKEditor-4.1-Released
- расширенный контент-фильтр руководство
короче - вам нужно настроить редактор, чтобы позволить 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
событие что очень важно в таких случаях.