ckeditor4-react
ckeditor4-react copied to clipboard
Easy Image doesn't trigger onChange event src/srcset is replaced with URL from server
Are you reporting a feature request or a bug?
Provide detailed reproduction steps (if any)
- Use the following configuration:
handleChange = (e) => {
console.log(e.editor.getData());
this.setState({ data: e.editor.getData() });
};
<CKEditor
onBeforeLoad={(CKEDITOR) => {
return (CKEDITOR.disableAutoInline = true);
}}
data={this.state.data}
type="classic"
onChange={this.handleChange}
config={{
extraPlugins: "easyimage",
removePlugins: "image",
cloudServices_tokenUrl: "https://your-token-url",
cloudServices_uploadUrl: "https://your-url"
}}
/>
- Open browser console
- Load the editor and upload an image
Expected result
The Change event should be fired in both situations:
- when image
srcattribute is set to blob e.g.<img alt="" src="blob:https://... - when the
srcattribute value is changed from blob to standard URL
Actual result
The Change event is only fired when image src attribute is set to blob e.g. <img alt="" src="blob:https://...
Other details
- Browser: Any
- OS: Any
- Integration version: Any
- CKEditor version: Any
- Installed CKEditor plugins: easyimage
There is an ugly workaround. Careful as it may hurt your eyes when looking but at least it gets the job done:
handleChange = (e) => {
const that = this;
const data = e.editor.getData();
if( data.indexOf('blob:https')>=0 ) {
const interval = setInterval(function(){
const newData = e.editor.getData();
if(newData.indexOf('blob:https')< 0) {
console.log( newData );
that.setState({ data: newData });
clearInterval(interval);
}
}, 500);
}
}