Jquery在contenteditable中的文本末尾设置光标答案

【问题标题】：Jquery set cursor at the end of the text in contenteditableJquery在contenteditable中的文本末尾设置光标
【发布时间】：2019-12-30 23:45:17
【问题描述】：

我正在编写我的 jquery 脚本，以便在单击按钮时通过替换文本来删除链接。我在文本末尾遇到了光标的问题，因为它会将光标移动到文本的开头，例如：当我单击2! 旁边时，它会将光标移动到@987654323 之前的开头@当我尝试这个时：

selected_text = window.getSelection().getRangeAt(0).endContainer.wholeText;
$('#text_editor').html($('#text_editor').html().replace('<a href="http://www.google.com/" target="_blank">Video Here 2!</a>', selected_text));
$('#text_editor').focus().val(selected_text);

这是我的代码：https://jsfiddle.net/su9dktrz/

我想要实现的是当我点击文本“这里的视频 1！”、“这里的视频 2！”、“这里的视频 3！”或者无论它是什么，当我单击按钮删除超链接以将其替换为文本时，我想将光标移动到文本 2! 或其他文本旁边。

您能否向我展示如何将光标移动到文本 1!、2!、3! 或 contenteditable 中的任何内容旁边？

我已经尝试在谷歌上找到答案，但我找不到。

谢谢。

【问题讨论】：

请确认当您在链接上click 时，您希望将该链接替换为一些文本，然后光标出现在该文本的末尾？

标签： javascript jquery html jquery-ui

【解决方案1】：

你可能需要为你的浏览器清理这个，我在 FireFox 中测试过。

工作示例：https://jsfiddle.net/Twisty/ksd1gwp9/22/

JavaScript

$(function() {
  function unlink(link) {
    var txt = link.text();
    var sp = $("<span>").html(txt);
    link.replaceWith(sp);
  }

  function getObjectFromCursor() {
    var obj, sel = window.getSelection() ? window.getSelection() : document.selection;
    var range = sel.getRangeAt(0);
    obj = $(range.startContainer.parentElement);
    console.log(obj, range);
    return obj;
  }

  $("#toolbar").on("click", "#toolbar_unlink", function() {
    var target = getObjectFromCursor();
    if (target.prop("nodeName") == "A") {
      unlink(target);
    }
  })
});

Range 接口表示可以包含节点和部分文本节点的文档片段。

范围具有节点，用于选择的开始和结束，并且这些节点具有对父元素的引用。这有助于我们找到光标所在的特定元素。然后我们可以定位这个元素并根据链接的内容将其替换为纯文本。

【讨论】：