javascript - window.getSelection "reselect"/"refresh"

Question

我尝试为可编辑的 html 元素构建工具栏。我有带有“粗体”、“斜体”等的工具栏。

当用户选择任何文本并单击“粗体”时，我检查是否存在跨度，如果不存在则插入。

let hasWrap = (selectionObject.node==='SPAN');

if(!isBold){

  this.addClassToSelection('bold', !hasWrap, selectionObject);

}

addClassToSelection(className, wrapSpan = false, selectionObject = {}){

if(wrapSpan){
  let wrapper = document.createElement('SPAN');
  wrapper.className = className;
  wrapper.textContent = selectionObject.text;

  selectionObject.range.deleteContents();
  selectionObject.range.insertNode(wrapper);
}else{
  let selection = window.getSelection();
  selection.anchorNode.parentNode.classList.add(className);
}

而且它有效。如果用户取消选择文本并再次选择，它也能完美工作。

但是当用户添加粗体(并且 js 插入 span 元素)并再次单击“粗体”以删除粗体时。系统未检测到“span”元素，因为仍然记得旧的 window.getSelection()。

我试过直接使用 window.getSelection() 而不用 wrap in 方法但我仍然将“p”或“div”视为父节点。 “跨度”是再次选择该文本后。

如何在没有用户操作的情况下“重新选择”此文本以检测跨度。

我想要什么

1. 用户正在选择文本
2. 用户点击“粗体”按钮
3. 系统将文本用粗体换行
4. 用户再次单击“粗体”按钮，window.getSelection 检测到插入到第 3 点的跨度

我在 ES6 中使用 React，我想使用没有 jQuery 的普通 js(包装，解包)。

Answer 1

<div contenteditable="true">Make bold with Ctrl+b</div>

使用 document.execCommand 会更好 - window.getSelection 更难

HTML

<div contenteditable="true">Some Text</div>

JS - 当需要自定义事件处理时

document.execCommand('bold',false,true);

在此处查看命令列表:https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

和此处的“如何使用”:http://codepen.io/netsi1964/full/QbLLGW/