plugins - How to dynamically create html snippet in CkEditor5 using JavaScript/jQuery?

Question

I am working on converting a custom app that currently is using Redactor and jQuery over to CkEditor, v5. It is generally working but we have a feature that generates some HTML and then inserts it into the editor. For the old editor this worked fine, but for CkEditor I think I need to insert the HTML inside a new HTML snippet. I can wrap the html in a div with class=raw-html-embed, which is what the snippet plugin generates normally, but CkEditor doesn't recognize it as a new snippet, it is just inserted as text.

Is there an API call or other process that would allow be to trigger creation of a new HTML snippet?

question from:https://stackoverflow.com/questions/65834631/how-to-dynamically-create-html-snippet-in-ckeditor5-using-javascript-jquery

Answer 1

I eventually looked at the Clipboard source code and was able to figure it out. Just had to convert the string to a view elements, then to model fragments, then insert. A simple example in the docs would have helped! If this isn't the best way to do it, please leave a comment.

ckeditor.model.change(writer => {
    const clipboard = ckeditor.plugins.get('Clipboard');
    const view = clipboard._htmlDataProcessor.toView(newText);
    const modelFragment = ckeditor.data.toModel(view, '$clipboardHolder');
    if (modelFragment.childCount === 0) {
        return;
    }
    ckeditor.model.insertContent(modelFragment);
});