源编辑区域上的CKEditor checkDirty（）(CKEditor checkDirty() on source editing area)

源编辑区域上的CKEditor checkDirty（）(CKEditor checkDirty() on source editing area)

每当我的一个或多个CKEditor WYSIWYG实例被更改时，我给相应的textarea属性data-dirty="1" ，所以我的应用程序知道它已经改变了。

我正在使用以下代码段：

$('textarea.wysiwyg').ckeditor(ckeditor_config, function () { var call_once = false; this.on('change', function () { if (this.checkDirty()) { if (!call_once) { $(this.element).attr('data-dirty', 1); $('#edit_form').change(); } call_once = true; } }); });

除非用户仅通过源按钮编辑HTML，否则这很有效。 在这种情况下， checkDirty()似乎没有被触发。

有谁知道如何在编辑器的两个视图上使用此功能？ 我使用的是最新版本的CKEditor（CKEditor 4.5.7），完整版，因此插件是aswel的最新版本。

提前致谢。

Whenever one or more of my CKEditor WYSIWYG instances is changed, I give the corresponding textarea the attribute data-dirty="1", so my application knows it has changed.

I'm using the following snippet for this:

$('textarea.wysiwyg').ckeditor(ckeditor_config, function () { var call_once = false; this.on('change', function () { if (this.checkDirty()) { if (!call_once) { $(this.element).attr('data-dirty', 1); $('#edit_form').change(); } call_once = true; } }); });

This works nicely, unless the user only edits the HTML via the Source Button. In such cases, checkDirty() does not seem to get fired.

Does anyone know how I can get this functionality working on both views of the editor? I am using the latest version of CKEditor (CKEditor 4.5.7), full edition, so the plugins are the latest versions aswel.

Thanks in advance.

最满意答案

正如change事件的文档所述 ：

请注意， change事件仅在wysiwyg模式下触发。 为了在源模式中实现类似功能，您可以监听例如key事件或本机input事件（Internet Explorer 8不支持）。

editor.on( 'mode', function() { if ( this.mode == 'source' ) { var editable = editor.editable(); editable.attachListener( editable, 'input', function() { // Handle changes made in the source mode. } ); } } );

如果您在一个页面中使用jQuery适配器和多个编辑器实例，可以尝试以下操作：

$( '#editor1' ).ckeditor( function(){ this.on( 'mode', function( evt ) { if ( this.mode == 'source' ) { var editable = this.editable(); // Get the textarea var element = $(this.element); editable.attachListener( editable, 'input', function( ev ) { // Handle changes made in the source mode. console.log( ev ); // Set an attribute on the textarea for handling element.attr('data-dirty',1); } ); } }); });

以上是回调函数将在单个编辑器实例上执行，但如果指定选择器覆盖多个编辑器实例，例如.myeditor则侦听器将附加到此方法创建的每个编辑器实例。

As the documentation for the change event states:

Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by Internet Explorer 8).

editor.on( 'mode', function() { if ( this.mode == 'source' ) { var editable = editor.editable(); editable.attachListener( editable, 'input', function() { // Handle changes made in the source mode. } ); } } );

If you are using jQuery adapter and multiple editor instances in one page, you can try below:

$( '#editor1' ).ckeditor( function(){ this.on( 'mode', function( evt ) { if ( this.mode == 'source' ) { var editable = this.editable(); // Get the textarea var element = $(this.element); editable.attachListener( editable, 'input', function( ev ) { // Handle changes made in the source mode. console.log( ev ); // Set an attribute on the textarea for handling element.attr('data-dirty',1); } ); } }); });

The above is the callback function will be executed on a single editor instance but if you specify selector covering multiple editor instances e.g. .myeditor then listener will be attached to every editor instance created by this method.