HTML
<div className={styles.textArea}
id={'formula'}
suppressContentEditableWarning
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onClick={handleClick}
placeholder={'请输入'}
contentEditable={true} />
CSS
.textArea{
// 关键代码
&:empty:before{
content: attr(placeholder);
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--dt-text-color4);
}
}
JS
const globalRangeRef = useRef();
const insertAtCursor = (html)=>{
const span = `<span>${html}</span>`
var selection= window.getSelection ? window.getSelection() : document.selection;
if(!window.getSelection){
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(span);
range.collapse(false);
range.select();
}else{
if(!globalRangeRef.current){
console.log('输入框没有焦点')
return
}
selection.addRange(globalRangeRef.current);
range = globalRangeRef.current;
range.collapse(false);
var hasR = range.createContextualFragment(span);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
updateCursorLocation()
}
const updateCursorLocation = () => {
saveRange()
}
const saveRange=function(){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
globalRangeRef.current = range
}
const handleClick = ()=>{
updateCursorLocation();
}
const handleKeyUp = (e) => {
updateCursorLocation();
}