window.getSelection“重新选择”/“刷新”
window.getSelection“重新选择”/“刷新”
提问于 2017-03-01 09:05:37
我尝试为可编辑的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”视为父节点。"span“是在再次选择此文本之后。
如何“重新选择”此文本以检测span，但不需要用户操作。
我想要什么
- 用户正在选择文本
- 用户单击“粗体”按钮。
- 系统用粗体类将文本封装在span中
- 用户再次单击“粗体”按钮，window.getSelection检测插入第3点的跨距。
我在ES6中使用React，我希望使用没有jQuery的普通js (包装，展开)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-01 09:09:44
<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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42527449
复制相关文章
相似问题
腾讯云开发者
