Я работаю с CKEditor и jQuery, и я хотел бы переключать флаг на true, когда пользователь меняет значение поля. Одним из таких полей является экземпляр CKEditor.
Все текстовые поля, имеющие класс wysiwyg, преобразуются в CKEditors, но как-то событие $('.wysiwyg').change() никогда не обнаруживается. Я сделал некоторые поисковые запросы, но комбинация ключевых слов, похоже, не принесла ничего, кроме неулокальных результатов (мой google-fu сосет).
Спасибо за любую помощь:)
Edit:
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
}
Я пробовал код выше, и он не работает. Это не дает мне ошибку, означающей, что он находит объекты CKEditor, но почему-то слушатель не привязан к нему?
Кроме того, если я заменил вложение событий только alert(CKEDITOR.instances[i].name);, он будет предупреждать имя моей текстовой области, поэтому я знаю, что не пытаюсь привязать событие click к нулю:)
Вы можете получить плагин (и объяснение о том, какие вещи обнаружены как изменения) в этом сообщении: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html, чтобы вы могли сделать такие вещи, как
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
}
Мне не удалось заставить работать onchange, однако он, похоже, работает, что может быть достаточно для ваших нужд
CKEDITOR.instances['name'].on('blur', function() {alert(1);});
Я понял!
Сначала у меня были редакторы на моем веб-сайте, созданные как textareas с классом ckeditor, и я позволил ckeditor.js сделать их richTextEditors. Затем я попробовал отличные решения из других ответов, но не смог заставить их работать.
Затем я изменил имя класса (на CKeditor), поэтому мне нужно инициализировать редакторы в моем коде. Я пробовал это, и он работает:
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
$('.CKeditor').ckeditor(function(){
this.on('blur', function({if(this.checkDirty())alert('text changed!');});
});
Поэтому, когда редактор теряет фокус, он проверяет, загрязнен ли он, и если он тогда, он запускает измененную функцию (предупреждение в этом примере).
Позже я снова попытался использовать плагин onchanges следующим образом:
$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}
Теперь он также работает с плагином (спасибо @Alfonso). Но я думаю, что плагин слишком сильно заставляет событие с изменениями, я предпочитаю первое решение, где изменения оцениваются только размытием.
Надеюсь, это поможет! и спасибо всем за вашу помощь.
В настоящее время происходит событие изменения: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change
Для меня используется версия 4.4.3. Вам нужно обрабатывать, когда изменяется исходный код и HTML.
// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
readOnly: false
});
// Handle when the Source changes.
bodyEditor.on('mode', function () {
if (this.mode == 'source') {
var editable = bodyEditor.editable();
editable.attachListener(editable, 'input', function () {
alert('source changed');
});
}
});
// Handle when the HTML changes.
bodyEditor.on('change', function () {
alert('change fired');
});
CKEditor имеет функцию a 'checkDirty()'. Самый простой способ проверить, было ли изменено значение CKEditor, это добавить этот фрагмент JS в ваш код.
CKEDITOR.instances['emailBody'].on('blur', function(e) {
if (e.editor.checkDirty()) {
var emailValChanged=true; // The action that you would like to call onChange
}
});
Примечание: emailBody - это идентификатор вашего поля textarea
Лучшее, что я могу сделать, в основном дает вам указание, изменилось ли содержимое редактора из исходного состояния.
var editor = $('#ckeditor').ckeditorGet();
editor.on("instanceReady", function(){
this.document.on("keyup", function(){
console.log(editor.checkDirty());
});
});
Я не придумал решение, но следующая ссылка больше рассказывает о доступных событиях с CKEditor:
http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html
Это не идеальное решение, которое я искал, но я использую следующее, чтобы отметить, что мой контент был изменен:
CKEDITOR.on('currentInstance', function(){modified = true;});
Это на самом деле не означает, что контент был изменен, но пользователь сфокусировал или размыл редактор (что лучше, чем ничего).
editor = CKEDITOR.appendTo('container', {resize_enabled: false});
editor.on('key', function () { setTimeout(setHtmlData,10); });
и т.д.
Для изменения событий загрузите плагин onchange http://ckeditor.com/addon/onchange и сделайте это
var options_cke ={
toolbar :
[
{ name: 'basicstyles', items :['Bold','Italic','Underline','Image', 'TextColor'] },
{ name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BGColor' ] },
{ name: 'font', items : [ 'Font','Styles']}
],
on :
{
change :function( ev )
{
//ev.editor.focus();
console.log(ev);
}
}
};
var editor=$('yourCkeEditorID').ckeditor(options_cke);
из того, что я вижу на сайте документации CKEditor, CKEditor поставляется с встроенной обработкой событий. Это означает, что вы должны использовать это вместо JQuery для прослушивания события onChange. Это также в основном потому, что, когда редакторы, такие как CKEditors, создают свои "причудливые" uis, вы в конечном итоге слушаете неправильный элемент для изменения. Я считаю, что если вы можете получить ссылку на объект JavaScript CKEditor, вы должны написать что-то вроде этого:
ckRefObj.on('onChange', function() { /* do your stuff here */ });
Надеюсь, это поможет.
Этот код будет предупреждать пользователя при нажатии любой боковой ссылки
$("#side-menu a").click(function(e){
if(checkUnsaved()){
if (confirm("You have unsaved changes.Do you want to save?")) {
e.preventDefault();
}
// or ur custom alert
}
});
function checkUnsaved() {
if(CKEDITOR)
return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case.
else
return false;
}
Я, по-видимому, не могу просто добавить комментарий, потому что я новичок на сайте, но ответ Garry правильный, и я самостоятельно проверил его, поэтому хотел добавить это.
CKEDITOR.instances [xxx].on('change', function() {alert ('значение изменено!!')});
Это работает для CKEditor 4+ и фиксирует все события изменения, включая отмену и повтор, рендеринг работы Alfonso js для новых пользователей.
$(document).ready(function () {
CKEDITOR.on('instanceReady', function (evt) {
evt.editor.on('blur', function () {
compare_ckeditor('txtLongDesc');
});
});
});
Не знаю о событии "change", но событие "blur" отлично работает для меня, когда я использую CKeditor версии 3.6
Для более поздних Googlers я заметил, что если вы создадите CKEditor, используя этот
$("#mytextarea").ckeditor();
он работает, но в форме submit не обновляется значение mytextarea, поэтому он отправляет старое значение
но
если вы это сделаете
CKEDITOR.replace('mytextarea');
в форме submit отправляет новое значение