Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

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

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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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);
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...