Append Text To CKEditor5 Text Area In Cursor Position Using SharePoint Framework (SPFx)

Steps to append text to CKEditor5 text area in cursor position using SPFx.

In this blog, we will learn to append custom text inside CKEditor5 Text Area in selected cursor position.

 

What is Classic Editor in CKEditor5?

 

Classic editor is what most users traditionally learned to associate with a rich text editor — a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.

 

Note
CkEditor5 Classic Editor is not yet supported in IE11 browser.

 

The below code is tested in Chrome, Mozilla, and Edge.

 

To integrate CKEditor5 (Classic Editor) in your SharePoint Framework please refer to my previous blogs.

 

Parameters

 

rteEvent - CKEditor5 event.

appendText - HTML data to be inserted into the Rich Text Area. 

/* Append updated file content to ckeditor */
    public AppendToRichTextEditor(rteEvent,appendText) {
        try {
                const viewFragment = rteEvent.data.processor.toView(appendText);
                const modelFragment = rteEvent.data.toModel(viewFragment);
                rteEvent.model.insertContent(modelFragment, rteEvent.model.document.selection);
            }
        } catch (error) {
            console.log("Error in AppendToRichTextEditor " + error);
        }
    }

Please feel free to share your comments.

 

I hope this helps!!!!!