Javascript 方法根据条件更改光标（插入符号）的位置

About contenteditable=true，我想使其无法删除此..中的.图标。图标总是排在最后

我正在尝试以下代码

<h2>
  <span class="txt" contenteditable="true">World</span>
</h2>

<h2>
  <span class="txt" contenteditable="true">Hello<span class="icon" contenteditable="false">★</span></span>
</h2>

<style>
h2 {
    word-break: break-all;
}
span.txt {
    border-bottom: 1px solid black;
    cursor: text;
    width: 100%;
    height: 100%;
    display: inline-block;
}
</style>

<script>
document.addEventListener ('click', event=> {
  let selection = event.view.getSelection();
  let target = event.target;
  let doc = target.ownerDocument;
  let icon = target.closest ('.icon');

  if (icon) {
    let e = icon.previousSibling;
    if (e) {
      let range = doc.createRange ();
      let len = e.length;
      range.setStart (e, len);
      range.setEnd (e, len);
      selection.removeAllRanges ();
      selection.addRange (range);
    }
  }
}, false);
</script>

样本：

上面的代码使得无法删除.icon

在世界区域中，单击任意位置时会显示插入符号，但单击Hello区域后面时不会显示插入符号

如何在Hello区域显示插入符号

---

提前感谢您的帮助

即使在您的代码中，我也可以删除该图标：只需单击图标后面的按钮并按backspace，它就为我删除了

但出于您的目的，我可以建议您：

只需将可编辑部分与不可编辑部分分开即可

<h2>
  <span class="txt" contenteditable="true">Hello</span>
  <span class="icon" contenteditable="false">★</span>
</h2>

另外，我刚刚删除了css，将图标放在文本旁边

---

希望能有所帮助。

谢谢你的有用建议。请尝试添加CSS。在这种情况下，.icon的行将更改。我不想更改图标的行。谢谢