Ckeditor5: Multi-root editor add/remove dom elements at runtime

[pat123456]

📝 Provide a description of the improvement

Actually in the multi-root editor, the list of DOM elements that will be the source for the created editor are defined in the "create" function.
A function to update this list after the editor was initialised would be welcome.

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Reinmar]

Thanks for the ticket! So far we considered the multi-root scenario to be a pre-set editor with a predefined roots. Having the roots changing dynamically would create a big problem for undo. Let's say that  you started undoing and you want to undo a change in a root that was removed by the app. What should happen? The editor has no control on the external app. So, we'd need a mechanism to either drop those changes or notify the app outside that it should bring back some root. Both options are possible, but tricky.

Could you describe what's your use case  for this? This would allow us better understand whether there's no other option for you and how should this dynamic root thing work.

[pat123456]

Hi Reinmar, thank you for your answer and attention.

You're right, I didn't think about the undo problem.
However, if a dynamic multiroot could be implemented, it seems to me that it would be nice if ckeditor would not restore a root that was deleted, but rather continue the undoes in the remaining roots.

I want to make a page builder where users will be able to add/delete rows, columns, tabs, carousel, galleries... and anything else that can be on a site. I'm using vuejs for that.
I started by making several instances of ckeditor, but it seems to me that it quickly becomes a problem of memory usage (but maybe I'm not doing it right).
Another solution could be to use only ckeditor and create all the elements of the page builder with ckeditor widgets, but I'm afraid that this would be less free than with vuejs + ckeditor used only for text.
Thank if you have some suggestions

[Reinmar]

Thanks. Your scenario makes sense. A multiroot editor is what intuitively many developers would use. We thought about it in the same way, but then we realised that undo is actually a problem.

However, if a dynamic multiroot could be implemented, it seems to me that it would be nice if ckeditor would not restore a root that was deleted, but rather continue the undoes in the remaining roots.

If you're creating a page builder, then shouldn't undoing also undo the structural changes? I think that what the users would expect is a combined undo stack. That's a pretty big topic, frankly speaking.

Anyway, what I'd considering those limitations is an page builder using multiple editor instances. However, to avoid memory issues, it should limit the number of concurrently running editor instances. This can be achieved in multiple ways – you could create an instance, when the user wants to edit some block and destroy it afterwards (assuming that the user cannot edit multiple blocks at the same time). You could have an editor pool and reuse editors that aren't in use currently by moving them to places where they are used (this would make your app more interactive). And so on.

[pat123456]

Hi Reinmar, thank again for your enlightening

If you're creating a page builder, then shouldn't undoing also undo the structural changes?

Yes, that would be the best. What I meant was, because it would be the easiest to implement, have a dynamic multi-root would already be a good thing even if that version doesn't worry about restoring the structure changes of the external application.
I had also thought of destroying unused ckeditor instances, but since that's a bit complicated I've put that aside hoping to use dynamic multiroot. I'll try that way again...

[pat123456]

Hi Reinmar,
It's hard for me to figure out how to start with the solution of "limiting the number of concurrently running editor instances ". I'm using vuejs/ckeditor components and i've started like this :

onEditorBlur(e, editor){
   editor.destroy();
}

but, even if the editor is destroyed, the memory usage doesn't seem to change a lot (i've tried this with more than 20 instances and the memory still around 150mo after all the editor instances destroyed)

and I don't know how to restore and editor after it was destroyed

may you can help me to start with that ? what would be the proper way with vuejs/ckeditor to use the two methods you suggest :

• destroying / restore editor
• reuse editors that aren't in use currently by moving them to places where they are used

[woshiliujia]

hi I hope this idea asap as soon as possible resolve. Thank you very much！！！