Rich text interpolation

Recently, a rich text box is needed in the project to implement the interpolation operation , Interpolation is not editable , But you can delete , Several schemes have been tried , Finally decided to use contenteditable This property to implement

First , contenteditable="true" You can make elements editable

<div contenteditable="true"></div>

In setting up the contenteditable Attribute , You can insert or edit any element , If you want to realize non editable interpolation , You can set the interpolated element to contenteditable="false", such , It realizes rich text interpolation .

however , Do you have any questions , How to insert an element into a specified cursor position

The browser provides selection and range Object to manipulate the cursor

 //  Insert the content at the cursor position , And move the cursor to the end of the content element 
function insertAtCursor(domNode) {
    
    //  Get the selected content , The starting point and the ending point are the cursor at the same position , Different locations are constituencies 
    const selection = window.getSelection();
    //  To be selected /focus The elements of 
    const anchorNode = selection.anchorNode;
    if (!anchorNode) return;
    //  Parent node 
    const range = selection.getRangeAt(0);
	//  Insert the incoming element node 
    range.insertNode(domNode);
    // collapse by true Make the starting point and the ending point at the same position , Cursor 
    // false When, it is the content of the selected area 
    range.collapse(true);

    //  Move the cursor to the last 
    const r = document.createRange();
    r.selectNodeContents(domNode);
    r.collapse(false);
    const s = window.getSelection();
    s.removeAllRanges();
    s.addRange(r);
}

such , You can insert the element into the cursor position , And move the cursor to the end of the element