在 contenteditable div 中创建链接和取消链接

Question

我正在尝试在 javascript/Angular 中创建一个 text/html 编辑器，我试图在其中创建 link 和取消 link 从 contenteditable div.

function saveSelection() {
  if (window.getSelection) {
    const sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      var ranges = [];
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        ranges.push(sel.getRangeAt(i));
      }
      return ranges;
    }
    return null;
  }
}

function restoreSelection(savedSel) {
  if (savedSel) {
    if (window.getSelection) {
      const sel = window.getSelection();
      sel.removeAllRanges();
      for (var i = 0, len = savedSel.length; i < len; ++i) {
        sel.addRange(savedSel[i]);
      }
    }
  }
}

function insertLink() {
  var savedSel = saveSelection();
  var url = document.getElementById("url").value;
  restoreSelection(savedSel);
  document.execCommand("createLink", false, url);
}

.editor {
  border: 2px solid black;
  width: 200px;
  height: 50px;
}

<div contenteditable="true" class="editor"></div>
<input type="text" id="url" style="border: solid blue 1px" value=" http://" onblur="insertLink()" />

我正在尝试在输入模糊时创建link，但在输入中 document.execCommand 而不是运行。

Answer 1

let savedSel=''
function saveSelection() {
  if (window.getSelection) {
    const sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      var ranges = [];
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        ranges.push(sel.getRangeAt(i));
      }
      savedSel=ranges;
      return;
    }
    savedSel=null;
  }
}

function restoreSelection() {
  if (savedSel) {
    if (window.getSelection) {
      const sel = window.getSelection();
      sel.removeAllRanges();
      for (var i = 0, len = savedSel.length; i < len; ++i) {
        sel.addRange(savedSel[i]);
      }
    }
  }
}
function insertLink(){
  var url = document.getElementById("url").value;
  restoreSelection(savedSel);
  document.execCommand("createLink", false, url);
}

.editor {
  border: 2px solid black;
  width: 200px;
  height: 50px;
}

<div contenteditable="true" class="editor" onblur="saveSelection()"></div>
<input type="text" id="url" style="border: solid blue 1px" value=" http://" onblur="insertLink()" />

在 contenteditable div 中创建链接和取消链接

createlink and unlink in contenteditable div

javascript

wysiwyg