Improve performance when editing large content in ckeditor4-vue

[guanlinz]

I noticed that when editing large content in ckeditor4 could be very slow, and I already seen that issue has been fixed in ckeditor/ckeditor5-vue#46, so is there a way to do the same fix in ckeditor4 please？

[jacekbogdanski]

@GuanlinZhang could you tell if the issue is related to CKEditor 4 itself, or Vue integration? We have already reported issue for large documents - ckeditor/ckeditor4#3750 so if you are also encountering this issue without using Vue (e.g. on CKEditor 4 demo) the issue is most likely caused by the editor itself.

If you are able to only reproduce the issue with Vue integration, please, send us some demo example of your editor configuration and sample data, so we can verify it.

[guanlinz]

Sorry for not making myself clear, it's CKEditor4 with Vue integration which showing this issue.

I 'm working on a project which could edit html file with ckeditor4, I've made you a sample demo with the sample data in the attachment,

You could run the demo by running npm install and npm run serve, and it should be running at http://localhost:8080/

If you running the app successfully, just type some words quickly and you could see that editor seems become very slow to display the content because of the data-binding feature in vue I guess？

The editor vue component file is in src\views\EditView.vue

It'll become worth when editing bigger than the sample data, maybe you could double the html code data and see the issue

Thanks in advance !

wiki-editor-frontend.zip

[jacekbogdanski]

Thanks for the sample @GuanlinZhang. Indeed typing feels sluggish and I cannot reproduce the issue without v-model. I suppose we would need to incorporate some throttling, because saving and emitting change event takes ~30ms for more complex documents. It may be too long for typing experience.

If I also remember correctly, undo plugin which is used to propagate change event into Vue is throttled, so we may need to cache 2 way binding data and update Vue ASAP instead of using undo plugin for that.

[guanlinz]

sorry for reopen this issue, but seems like you just reproduce the issue with v-model, and according to the last comment, you set the value but the ckeditor area is empty? I really need this feature, could you help to check : )

Thanks in advance

[jacekbogdanski]

I'm not sure if I understand. I can reproduce the issue with v-model using the content you provided in the demo from #52 (comment) comment. Could you tell more what did you mean?

[guanlinz]

so, you are suggesting that I don't to use v-model, do you have any alternative method for doing this? Thanks, I really need this, like direct access with DOM? any better idea?

[jacekbogdanski]

I don't see any quick workaround than using value directive for now. Although, we plan to start working on this issue soon.

[guanlinz]

Thanks the suggestion for using the value directive, that will be really helpful : )

[jacekbogdanski]

@GuanlinZhang we still want to fix the issue, so I'm reopening this ticket.