Question

我正在使用我的jquery脚本来通过单击按钮时替换文本来删除链接。我在文本末尾遇到了一个光标问题，因为它将光标移动到文本的开头，例如：当我单击2!旁边时，它将光标移动到文本的开头Video Here 1尝试时：

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/

我想要实现的是单击文本“ Video Here 1！”，“ Video Here 2！”，“ Video Here 3！”。或它是什么，当我单击一个按钮以删除超链接以将其替换为文本时，我想将光标移到文本2!或其附近。

您能举例说明如何将光标移动到文本1!，2!，3!或内容可编辑的内容旁边吗？

我试图在Google上找到答案，但找不到。

谢谢。

Answer 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接口代表文档的一部分，可以包含节点和部分文本节点。

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

jQuery将光标设置在contenteditable

1 个答案: