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方法但我仍然将“p”或“div”视为父节点。 “span”是在再次选择此文本之后。

如何“重新选择”此文本以检测范围，但无需用户操作。

我想要什么

用户正在选择文字
用户点击“粗体”按钮
使用粗体类
用户再次单击“粗体”按钮，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/

window.getSelection“reselect”/“refresh”

1 个答案: