react div可编辑,点击输入后光标定位在内容后面

Handsome_mascot

已于 2023-11-16 16:11:47 修改

阅读量336

点赞数

分类专栏： react 笔记 contentEditable 文章标签： react.js javascript 前端

于 2023-11-16 15:58:21 首次发布

本文链接：https://blog.csdn.net/Handsome_mascot/article/details/134443974

版权

笔记同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

contentEditable

1 篇文章 0 订阅

订阅专栏

HTML

<div className={styles.textArea}
     id={'formula'}
     // 在react中对元素使用contentEditable= true 会发出警告,可以使用suppressContentEditableWarning属性去除
     suppressContentEditableWarning 
     onKeyUp={handleKeyUp}
     onKeyDown={handleKeyDown}
     onClick={handleClick}
     // 添加提示需要在css中同步设置
     placeholder={'请输入'}
     // div可编辑的关键
     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();//全局range的记录

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{
        // console.log(globalRangeRef.current)
        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();//按下任意按键都会更新最新的光标位置
}