contentEditable

Time:2021-10-25
function getDivContent(wrapper){
	var textareaText = '';
	for (var i = 0; i < wrapper.childNodes.length; i++) {
		if (wrapper.childNodes[i].nodeName !== '#text') {
			if (wrapper.childNodes[i].innerHTML == '') {
				textareaText += wrapper.childNodes[i].innerHTML
			} else {
				textareaText += wrapper.childNodes[i].innerText.replace(/\n$/,'') + ((i == wrapper.childNodes.length - 1|| wrapper.childNodes[i].innerText=='\n') ? '' : '')
			}

		} else {
			textareaText += wrapper.childNodes[i].nodeValue + ((i == wrapper.childNodes.length - 1 || wrapper.childNodes[i+1].nodeName=='BR') ? '' : '')
		}
	}
	return textareaText
}

  

Insert text at the cursor

if (!selection) {
                            selection = getSelection();
                        }
                        if (lastEditRange) {
                            selection.removeAllRanges()
                            selection.addRange(lastEditRange)

                            //Determines whether the selected object range is an edit box or a text node
                            if (selection.anchorNode.nodeName != '#text') {
                                if (selection.anchorNode == addLinkFrame.inputWrapper) {
                                    console.log(0)
                                    addLinkFrame.inputWrapper.insertBefore(html, addLinkFrame.inputWrapper.childNodes[selection.anchorOffset])
                                } else if (addLinkFrame.inputWrapper.childNodes.length == 0 || (addLinkFrame.inputWrapper.childNodes.length == 1 && !addLinkFrame.inputWrapper.childNodes[0].innerText)) {
                                    console.log(1)
                                    addLinkFrame.inputWrapper.innerHTML = '';
                                    addLinkFrame.inputWrapper.appendChild(html)
                                } else if (addLinkFrame.inputWrapper.childNodes.length > 0) {
                                    console.log(2)
                                    //If the child element of the text box is greater than 0, it indicates that there are other elements, and the expression node is inserted according to the position
                                    for (var i = 0; i < addLinkFrame.inputWrapper.childNodes.length; i++) {
                                        if (addLinkFrame.inputWrapper.childNodes[i] == selection.anchorNode) {
                                            if (selection.anchorOffset == 0) {
                                                addLinkFrame.inputWrapper.childNodes[i].prepend(html)
                                            }
                                        } else {
                                            if (selection.anchorOffset == 0) {
                                                selection.anchorNode.prepend(html)
                                            }
                                        }
                                    }
                                }
                                // else {
                                //     console.log(2)
                                //// otherwise, insert an expression element directly
                                //     // $(addLinkFrame.inputWrapper).append(html)
                                //     addLinkFrame.inputWrapper.appendChild(html)
                                // }
                                //Create a new cursor object
                                var range = document.createRange();
                                //The scope of the cursor object is defined as the new expression node
                                range.selectNodeContents(html)
                                //The cursor position is positioned at the maximum length of the expression node
                                range.setStart(html, html.length)
                                //Overlap the beginning and end of the cursor
                                range.collapse(true)
                                //Clears all cursor objects for the selected object
                                selection.removeAllRanges()
                                //Insert a new cursor object
                                selection.addRange(range)
                            } else {
                                console.log(3)
                                //If it is a text node, get the cursor object first
                                var range = selection.getRangeAt(0)
                                //Get the scope definition object of the cursor object, which is generally the textnode object
                                var textNode = range.startContainer;
                                //Get cursor position
                                var rangeStartOffset = range.startOffset;
                                //The text node inserts a new expression content at the cursor position
                                textNode.insertData(rangeStartOffset, html.innerText)
                                //Move the cursor to the original position plus the length of the new content
                                range.setStart(textNode, rangeStartOffset + html.length)
                                //The beginning and end of the cursor overlap
                                range.collapse(true)
                                //Clears all cursor objects for the selected object
                                selection.removeAllRanges()
                                //Insert a new cursor object
                                selection.addRange(range)
                            }
                            //Record the last cursor object anyway
                            lastEditRange = selection.getRangeAt(0)
                        } else {
                            console.log(4)
                            //G. error ('Please select the position where you want to add the cursor ');
                            var allhtml = $(addLinkFrame.inputWrapper).text() + html.innerText;
                            $(addLinkFrame.inputWrapper).text(allhtml)
                        }

 

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]