Source editing doesn't save unless going back to WYSIWYG

[fspreck-indiscale]

Maybe this is rather a question than a bug but I couldn't find a bettter place to submit it.

We're using CKeditor to edit the (mardown) contents of a textarea. Unfortuantely, the textarea isn't part of a submittable form and its contents (among others) are sent to a server after manually saving (and thereby closing the editing area). That's why I use a simple

editor.model.document.on("change:data", (e) => {
    editor.updateSourceElement();
});

to ensure that the textarea always contains the user input of the WYSIWYG editor which works fine, except for input made from within the source editor. There, the change:data event never fires and subsequently, nothing is changed.

For CKEditor 4 I found this. Is there something similar for CKEditor 5? What am I missing?

📝 Provide detailed reproduction steps (if any)

1. Use a manual saving setup as above
2. Enter source mode and change something
3. Save (or observe the change:data event) and see that nothing happens

✔️ Expected result

Changing something while in source editing should also trigger the

❌ Actual result

Only after going back to the WYSIWYG mode, the changes are applied (i.e., the change:data event is fired).

📃 Other details

• Browser: Firefox 95.0, Chromium 96.0.4664.110
• OS: Arch Linux
• First affected CKEditor version: 31.0.0
• Installed CKEditor plugins: Markdown, SourceEditing

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Dumluregn]

For anyone struggling with this issue - if you need to sync data on some trigger (e.g. button click), you can use _updateEditorData() method of the SourceEditing plugin - https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-_updateEditorData. See how it works below:

[Reinmar]

In general, every approach that retrieves data from the editor on a frequent action (like change:data) is quite non-optimal. The editor set/get data pipeline isn't designed for such frequent use. It's just synchronous and too slow to be called upon frequent user actions. It may cause the editor to become less-responsive.

Therefore, a much better solution is indeed triggering data retrieval/save on some reasonable trigger like "save" button click or a debounced autosave callback. So, @Dumluregn's response makes a lot of sense actually. 

It also makes a lot of sense that the editor data is not automatically updated by the source mode. It may simply cause a lot of issues with some partially incomplete HTML being forced into the editor's data pipeline, causing weird effects in there.

The only issue here, IMO, is that _updateEditorData() is a private method. IMO, we should make it public and that's it.

[Witoso]

@Reinmar do we treat a change in a private method as a breaking change?

Possible solution that could benefit from TS:

1. Change the method name to one without an underscore.
2. Do the forward from the underscore method.
3. Add deprecated that will inform the dev about deprecation.

But we are not sure if internal API is a part of breaking changes. Minor breaking change?

[Witoso]

Decision: we don't treat private API as a breaking change.

[aljaznuncic]

For anyone struggling with this issue - if you need to sync data on some trigger (e.g. button click), you can use _updateEditorData() method of the SourceEditing plugin - https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-_updateEditorData. See how it works below:

How can you do this with angular and ckeditor custom build ("@ckeditor/ckeditor5-source-editing": "^38.0.1"). I got error Uncaught ReferenceError: editor is not defined

[Witoso]

@aljaznuncic check the accessing editor instance doc for Angular.

[aljaznuncic]

@Witoso I still have a problem.

When I'm in SourceEditing mode, ngModel should be updated with click on button UPDATE SOURCE, but it isn't (Browser freeze)

Here is the link to the code: https://github.com/aljaznuncic/testCkeditor

[Witoso]

@aljaznuncic looks like a known problem in Angular integration (ckeditor/ckeditor5-angular#360), let's move the discussion there.

[BashisthaSudeep]

I'm having the same issue using https://github.com/ckeditor/strapi-plugin-ckeditor where any changes on source editor doesn't trigger the update and the changes aren't saved.

[Apederli]

@aljaznuncic
When I opened sourceEditing in my angular project, I couldnt save the edited text. So ngModel didn't change. I found a solution for my own.
Before saving, I closed the sourceEditing; like this:
const button = this.el.nativeElement.querySelector('.ck-source-editing-button');
if (button && button.classList.contains('ck-on')) {
button.click();
}

[aimeos]

@Witoso The blur event is also not fired if the editor is in source edit mode. According to the explanation of @Reinmar, this would be a good option performance-wise but currently doesn't work. Any plans to add the blur event to the source edit mode?

[Witoso]

@aimeos you posted the same comment to 3 issues. In the future, please create a new one.

Any plans to add the blur event to the source edit mode?

No plans for now as source editing is not directly editor instance. Create a ticket and we store this improvement.

[aimeos]

@Witoso A new Github issue or somewhere else?