Content Model APIs : How to set content programmatically about roosterjs HOT 4 CLOSED

First, it is not encouraged to directly set content into editor to fully replace existing content. But if you need, you can call editor.formatContentModel() and in the callback replace all the blocks of content model using the new blocks. For example:

function replace(editor, html) {
  const newModel = createModelFromHtml(html);
  editor.formatContentModel(model => {
     model.blocks = newModel.blocks;
     return true;
  });
}

Why do you need to replace all the content?

from roosterjs.

Hi @JiuqingSong,
Thank you so much for your help. I need this because, when I am in edit form, I am loading data asynchronously from the api, by the time editor is already initialized and I don't want to recreate editor by using new Editor. Do you have any other suggestion or better idea how we can handle this.

Currently I am using the solution you provided above, and which is working!

from roosterjs.

The problem is, if the loading takes longer time than expected, user may already start editing, then once data is loaded, user may see all content got suddenly changed, which is not a good experience.

Actually editor is created on top of existing DIV. So you can just render a normal DIV initially. Once data is loaded, call new Editor(div, options) to initialize the editor so the DIV become editable.

from roosterjs.

Ya, make sense, thank you so much for your input!

from roosterjs.