JS range之保存光标位置,为光标位置添加内容

最新推荐文章于 2024-04-14 10:14:01 发布

原创最新推荐文章于 2024-04-14 10:14:01 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #可编辑DIV添加内容 #保存编辑框光标位置 #js光标位置添加内容

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用可编辑DIV实现编辑框的方法，并通过JavaScript实现了点击按钮在光标位置插入HTML内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在此，我们采用可编辑div作为编辑框，首先给编辑框获取focus加光标，然后，点击取消编辑框失去焦点，但是依然保存光标位置（假装失去焦点），然后，点击确定，为光标位置添加内容。

<button class="cancel">Cancel</button>
<button class="Sure">Sure</button>
<div contenteditable="true" id="textbox">
   <strong>test</strong>
   <p>testtesttesttest</p>
    <strong>testtest</strong>
    <img src="1.jpg" alt="test">
</div>

代码如下：

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".cancel").on("click", function(){
  var text = '';
  insertTextAtSelection(text);
})
$(".Sure").on("click", function(){
  var text = '<strong><i>加粗变斜体</i></strong>';
  insertTextAtSelection(text,"html");
})
function insertTextAtSelection(text, mode) {
    var _this = this;
    var sel, range, node;
    mode = mode || '';
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            // range.deleteContents();
            var textNode = document.createTextNode(text);
            if (mode == "html") {
                var el = document.createElement("div");
                el.innerHTML = text;
                var frag = document.createDocumentFragment(),
                    node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                sel.removeAllRanges();
                range = range.cloneRange();
                sel.addRange(range);
            } else {
                console.log(textNode);
                range.insertNode(textNode);
                range.selectNode(textNode);
            }
        }
    }
}
 });
</script>