ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

DocumentChangeEvent('change:data) doesn't detect <imageInline> insert when load html from DB

Open ScottPony opened this issue 1 year ago • 4 comments

Provide a description of the task

Try to log model document changes by

editor.model.document.on<DocumentChangeEvent>('change:data', () => { const changes = editor.model.document.differ.getChanges(); for (const change of changes) { console.log('model change', change); } });

When insert an inline image, it works as expected and export html to save to DB. But the confuse is when load html from DB to editor, the "imageBlock" could get the type: insert log print in console but "imageInline" does not. Have gone through the document but didn't find any information. What I want to do is get some authorization token from back-end server when the "imageBlock/Inline" has been loaded then I can use the response info to change the image source attribute (src) then after that the image would show in editor.

What steps should be taken to fulfill the task? What to know how to detect "imageInline" has been loaded from html or the best practice of my scenario.

📃 Other details

I know there has "ImageLoadedEvent" but in my scenario, the image has to add auth token so that it can be loaded. Have try this event but the image need loaded first then the event could be trigger so I think this event not suitable in my case.

  • Browser: …chrome/edge
  • OS: …windows
  • CKEditor version: …38.0.1 & ckeditor5-angular: 6.0.1
  • Installed CKEditor plugins: …
  • "@ckeditor/ckeditor5-alignment": "^38.0.1", "@ckeditor/ckeditor5-autoformat": "^38.0.1", "@ckeditor/ckeditor5-basic-styles": "^38.0.1", "@ckeditor/ckeditor5-cloud-services": "^38.0.1", "@ckeditor/ckeditor5-easy-image": "^38.0.1", "@ckeditor/ckeditor5-editor-classic": "^38.0.1", "@ckeditor/ckeditor5-essentials": "^38.0.1", "@ckeditor/ckeditor5-find-and-replace": "^38.0.1", "@ckeditor/ckeditor5-font": "^38.0.1", "@ckeditor/ckeditor5-heading": "^38.0.1", "@ckeditor/ckeditor5-image": "^38.0.1", "@ckeditor/ckeditor5-indent": "^38.0.1", "@ckeditor/ckeditor5-link": "^38.0.1", "@ckeditor/ckeditor5-list": "^38.0.1", "@ckeditor/ckeditor5-paste-from-office": "^38.0.1", "@ckeditor/ckeditor5-table": "^38.0.1", "@ckeditor/ckeditor5-typing": "^38.0.1", "@ckeditor/ckeditor5-upload": "^38.0.1", "@ckeditor/ckeditor5-word-count": "^38.0.1"

ScottPony avatar Jun 15 '23 17:06 ScottPony