关于javascript：window.getSelection”重新选择” /”刷新”


window.getSelection “reselect”/“refresh”

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

选择用户的任何文本并单击"粗体"时，我检查是否存在跨度，如果没有，则插入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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(wrap，unwrap)。

    1
    Make bold with Ctrl+b

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

    HTML

    1
    Some Text

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

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

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

    和此处的"使用方法"：http://codepen.io/netsi1964/full/QbLLGW/

    相关讨论