Javascript window.getSelection（）.focusNode.nodeValue返回HTML

为什么。。。我真的不想使用其他Pople编辑器

我想学习如何创造，而不是如何使用

所以我决定创建自己的编辑器

创建bbcode编辑器很容易。。。 但是当我尝试创建HTML版本时，实时预览和编辑

我有个小问题可能是我最大的问题 当然，提出问题是我搜索后的最后希望

无论如何，我的英语很差，所以我希望你能理解我说的话

听着，我的期望真的

这是我最简单的编辑器

$document.readyfunction{ $.buttonBold.clickfunction{ $.editableDiv.focus； var help_me_anchorNode=window.getSelection.anchorNode.nodeValue； var help_me_anchorOffset=window.getSelection.anchorOffset var help\u me\u focusOffset=window.getSelection.focusOffset var help_me_focusNodeValueLength=window.getSelection.focusNode.nodeValue.length； var help_me_firstTag=； var help_me_lastTag=； 如果help\u me\u AnchoroOffset>help\u me\u focusOffset{ var help_me_firstTag=； var help_me_lastTag=； } window.getSelection.anchorNode.nodeValue=help\u me\u anchorNode.slice0，help\u me\u anchorOffset+help\u me\u firstTag+help\u anchorNode.slicehelp\u anchorOffset； var help_me_focusNodeValue=window.getSelection.focusNode.nodeValue； ifwindow.getSelection.focusNode.nodeValue.length-帮助\u me\u focusNodeValueLength>0{ help\u me\u focusOffset+=window.getSelection.focusNode.nodeValue.length-help\u focusNodeValueLength； } window.getSelection.focusNode.nodeValue=help\u me\u focusNodeValue.slice0，help\u me\u focusOffset+help\u me\u lastTag+help\u me\u focusNodeValue.slicehelp\u focusOffset； }; }; .editableDiv{ 宽度：300px； 高度：100px； 背景：ccc； 填充：10px； } 大胆的 双击此：HELPME 然后，单击粗体按钮 结果将为：b帮助维护/b 不是：帮帮我 您可以使用window.getSelection和.surroundContents

我编辑了演示并添加了一个粗体和斜体的测试：

---

未捕获的DomeException:未能对“范围”执行“surroundContents”：该范围已部分选择了非文本节点。当选择多行WOW。。。它的工作完美。。。但我还是想知道。。。为什么要创建元素跨度。。。谢谢你的帮助，但我真的很抱歉。。。我的问题还没有解决。。。这就是为什么我使用getSelection&AnchoroOffset而不是exectCommand。。。。当我为第二个属性创建弹出窗口时，如。。。需要弹出窗口来输入URL。。。当我点击弹出窗口时。。。焦点已更改为弹出窗口。。。因此，我需要检测选定的文本&焦点偏移量&用$.html替换整个文本@JackRose对我来说，这似乎是另一个问题，你应该验证这一点，然后打开另一个问题对不起，我的错。。。我的问题几个小时前就解决了。。。但是焦点还是有问题。。。谢谢你的帮助@Nicolas R^_^

$(".buttonBoldHtml").click(function(){
  $(".editableDiv").focus();

  var highlight = window.getSelection(),
      bold = $('<b/></b>')[0],
      range = highlight.getRangeAt(0);
  range.surroundContents(bold);
});

$(".buttonBoldHtml").click(function(){
  $(".editableDiv").focus();

  var range = window.getSelection().getRangeAt(0),
      bold = document.createElement('b');
  bold.appendChild(range.extractContents());
  range.insertNode(bold);
});