在 Javascript 中跟踪对多个 Ckeditor 5 实例的更改

Question

我正在通过 fancybox 3 使用多个 ckeditor 访问 iframe。它运行良好，但我想跟踪用户是否在文本框中输入了任何内容，以便我可以更改 fancybox 的按钮并在他们关闭时向他们发出警报。这是我在 iframe 页面上的 JS 代码：

  window.editors = {};

  document.querySelectorAll( '.editor' ).forEach( ( node, index ) => {
    ClassicEditor
      .create( node, {
        removePlugins: ['Heading', 'BlockQuote', 'CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
      } )
      .then( newEditor => {
        window.editors[ index ] = newEditor;
      } );

      editors[ index ].document.on( 'change', () => {
        console.log( 'Alert: The document has changed!, are you sure you want to close without saving?' );
      } );

  } );

但是它给我一个错误：

ifram.php:1070 Uncaught TypeError: Cannot read properties of undefined (reading 'document')

at ifram.php:1070

at NodeList.forEach (<anonymous>)

at ifram.php:1060

我也试着把它从 document.querySelectorAll() 函数中去掉

  editors.document.on( 'change', () => {
    console.log( 'Alert: The document has changed!, are you sure you want to close without saving?' );
  } );

但它给了我另一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'on')

Answer 1

你可以使用 newEditor.model.document.on('change:data') document

<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<textarea class="editor"></textarea>
<script>
window.editors = {};
document.querySelectorAll( '.editor' ).forEach( ( node, index ) => {
  ClassicEditor
  .create( node, {
    removePlugins: ['Heading', 'BlockQuote', 'CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
  } )
  .then( newEditor => {
    window.editors[ index ] = newEditor;
    newEditor.model.document.on('change:data', ()=> {
        console.log( 'Alert: The document has changed!, are you sure you want to close without saving?' );
    });
  } );
});
</script>

在 Javascript 中跟踪对多个 Ckeditor 5 实例的更改

Track changes to multiple Ckeditor 5 instances in Javascript

javascript

ckeditor