在 contentEditable div 中用户选择的开头和结尾插入 HTML 标记

Question

我有一个 contentEditable div，我希望用户能够在其中按下按钮并使他们选择的文本变为粗体。我现在的做法是使用window.getSelection.toString(); 获取选择中的文本，并将其替换为具有相同内容的粗体元素，但window.getSelection.toString() 不包含选择中的任何HTML 元素。

为了解决这个问题，我想在选择的开头和结尾添加 HTML 标记。我在堆栈溢出中找到了其他答案，用于将 HTML 添加到选择的开头和结尾，但是那些将 div 或 span 附加到开头和结尾，导致 <div><b></div> Selection text <div></b></div> 将粗体标签与实际选择文本隔离开来。

我没有使用任何库，也不想使用任何库。

Answer 1

这是一个关于如何使用 window.getSelection 和 Range API 获取（或更改）HTML 内容的示例，现在是推荐的方式，现在也得到了更广泛的支持：https://caniuse.com/#feat=selection-api

首先是get html示例：

function butclick() {
  var ediv = document.getElementById('your-editable-div'); // get a reference to the editable div
  var range = window.getSelection().getRangeAt(0); // get the range
  var aux = document.createElement("span"); // create an auxiliar tag
  aux.appendChild(range.cloneContents()); // clone (so the original selection is not removed or replaced) and insert it into the auxiliar dom tag
  alert(aux.innerHTML); // now you can get the innerHTML of the aux tag
}

<div contentEditable id="your-editable-div" style="border: solid 1px black; padding: 2px; margin: 5px;">This is <b>an editable</b> div with html tags</div>
<button onclick="butclick()">get html of selected area</button>

这里如何将该html更改为其他html：

function butclick() {
  var ediv = document.getElementById('your-editable-div'); // get a reference to the div
  ediv.focus(); // optional: focus again the editable div so you can continue editting
  var range = window.getSelection().getRangeAt(0); // select first of the selections
  var aux = document.createElement("span"); // create an aux html span tag
  aux.style.backgroundColor = "red"; // apply some new style
  aux.appendChild(range.extractContents()); // extract (so the original contents are removed) and inyect into aux tag
  range.insertNode(aux); // finally insert back again the edited aux node back into the editable div, this includes the aux tag itself, but you can insert whatever dom tag you want, or various tags, or even only the children
}

<div contentEditable id="your-editable-div" style="border: solid 1px black; padding: 2px; margin: 5px;">This is <b>an editable</b> div with html tags</div>
<button onclick="butclick()">replace html with other html</button>

Answer 2

您可以使用document.execCommand()。它已经过时了，MDN says it shouldn't be used，但几乎每个库（例如：MediumEditor、Editor.js，甚至 Google Docs） 都在使用它，所以你可以相信它会得到很多支持来自社区。​​p>

var contentDiv = document.getElementById('content');

document.getElementById('bold').addEventListener('click', makeBold);
document.getElementById('ital').addEventListener('click', makeItalic);

function makeBold() { document.execCommand('bold'); }
function makeItalic() { document.execCommand('italic'); }

#content { font-family: Arial, Helvetica, sans-serif; border: 1px solid #f1f1f1; padding: .5em .2em; margin: .5em 0; }

<button id="bold"><b>Bold</b></button>
<button id="ital"><i>Italic</i></button>

<div id="content" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>