Javascript 将选择器光标设置到contenteditable div中的新位置

我一直在制作一个文本编辑器，但我无法在div中获取并设置一个新位置的“光标”，使其内容可编辑

<form action="submitchapter.php" method="post">
    <div class="input-group mb-3" style="margin-top:30px;">
        <input type="text" class="form-control name" placeholder="Chapter Name" name="sname" value="No Title For The Chapter" required>
    </div>
    <div class="buttons shadow-sm">
        <button style="padding:0; border:0px solid white; background-color:white;" type="button" id="buttonbold"><i class="fas fa-bold" id="bold"></i></button>
        <input id="file-input" type="file" name="name" style="display: none;" />
    </div><br>
    <div class="containe shadow-sm" style="padding:20px; background-color:white;">
        <div class="content" contenteditable="true" name="content" id="content" role="textbox" spellcheck="false"></div>
    </div>

var content=document.getElementById（“content”）；
var bold=document.getElementById（“bold”）；
var content=document.getElementById（“内容”）；
$（“#按钮框”）。单击（函数（）{
content.focus（）；
var valuelength=content.value.length-4；
content.setSelectionRange（content.value.length，valuelength）；
});
var-active=false；
$（“#粗体”）。单击（函数（）{
如果（boldactive==false）{
var content1=content.innerHTML；
content.innerHTML=content1+“”；
boldactive=true；
}否则{
var content1=content.innerHTML；
content.innerHTML=content1+“”；
boldactive=false；
}
});

但什么都没用。我也尝试过textarea，但我认为我做错了什么。

元素没有

值

属性

$("#buttonbold").click(function(){
  content.focus();
  var valuelength = content.textContent.length - 4;
  content.setSelectionRange(content.textContent.length,valuelength);
});

---

元素也没有

setSelectionRange

方法， 因此，以下是使用

contenteditable

属性对元素进行此类选择的解决方案：

const myDiv=document.getElementById（'my-div'））
，btSelectRange=document.getElementById（'bt-select-range'））
;
功能设置选择范围（el、pos、len）
{ 
el.focus（）；
让range=document.createRange（）
，sel=window.getSelection（）
;
范围设置开始（el.firstChild，位置）
范围设置结束（el.firstChild，pos+len）
选择removeAllRanges（）
选择添加范围（范围）
}
btSelectRange.onclick=\u=>
{
设置选择范围（myDiv，2,5）
}

#我的div{
边缘：1米；
填充：.7em；
宽度：16em；
高度：3em；
边框：1px纯灰；
}
钮扣{
边缘：1米；
}

你好，世界
选择range pos:2 len:5

如果代码太乱，则将其最小化并可复制，而且他们也没有

setSelectionRange

方法……问题是“如何在contenteditable div中设置光标位置？”是的，这是问题的一部分……问题是：将选择器光标设置到contenteditable div中的新位置。是的，它回答了问题。@Kaido感谢您的建设性批评，我已经第二次更改了我的答案，现在正确吗？是的，现在更好了。

$("#buttonbold").click(function(){
  content.focus();
  var valuelength = content.textContent.length - 4;
  content.setSelectionRange(content.textContent.length,valuelength);
});