search

ckeditor / ckeditor4-react

Official CKEditor 4 React component.
Other
95 stars 51 forks source link

The onChange event is called when initializing CKEditor with data #294

Closed casper-fernandes closed 1 year ago

casper-fernandes commented 1 year ago

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

Refer to the below sandbox link. It uses ckeditor5, but Im getting the same issue in ckeditor4 https://codesandbox.io/s/ckeditor-5-react-forked-cbkfyn

Expected result

Either the onChange event should not be called when initializing CKEditor with data or there should be some way to determine whether the onChange event was fired due to a user initiated event.

Actual result

The onChange event is fired both when initializing CKEditor with data and when a user initiated event (like typing) occurs.

Other details

KarolDawidziuk commented 1 year ago

Hi, @casper-fernandes and thank you for the report.

The behavior of the onChange event is a by-design behavior. The CKEditor wrapper will emit this event every time the data changes and does not know if the change was made inside an editable or if it was set from the outside.

In addition, is the information about the integration version correct, I mean v1.1.1? If yes, I encourage you to use our latest version of the CKEditor4 react integration. Please see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_react_current.html#ckeditor-4-react-compatibility for more information.

casper-fernandes commented 1 year ago

Hi @KarolDawidziuk. Is there any work around for this, or will updating to v3 solve this issue?

jacekbogdanski commented 1 year ago

@casper-fernandes it's by-design behavior that won't change during CKEditor 4 React integration upgrades. I guess you could just detect when an event is called manually and cancel the change event when needed, but there is no specific workaround that would let you disable the onChange event directly via the editor or react integration APIs.

For example, calling the editor.setData method will also cause onChange event execution. If you need to detect some specific user interaction within the editor, you can try to use other editor events, like the key event.