Javascript window.getSelection().focusNode.nodeValue return 与 HTML

Question

嘿...我真的不想使用其他人的编辑器...

我想学"how to create"不是"how to use"

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

My editor

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

我有一个小问题（可能是我最大的问题）当然提问是我搜索后最后的希望了...

无论如何，我的英语不好，所以我希望你能明白我在说什么。

看，我的期望 VS 真的

Expectation VS Really

这是我最简单的编辑器

$(document).ready(function(){
 $(".buttonBold").click(function(){
  $(".editableDiv").focus();
  var help_me_anchorNode    = window.getSelection().anchorNode.nodeValue;
  var help_me_anchorOffset   = window.getSelection().anchorOffset
  var help_me_focusOffset   = window.getSelection().focusOffset
  var help_me_focusNodeValueLength  = window.getSelection().focusNode.nodeValue.length;
  var help_me_firstTag    = "<b>";
  var help_me_lastTag    = "</b>";

  if(help_me_anchorOffset > help_me_focusOffset){
   var help_me_firstTag   = "</b>";
   var help_me_lastTag   = "<b>";
  }
  window.getSelection().anchorNode.nodeValue = help_me_anchorNode.slice(0, help_me_anchorOffset) + help_me_firstTag + help_me_anchorNode.slice(help_me_anchorOffset);
  var help_me_focusNodeValue = window.getSelection().focusNode.nodeValue;
  if(window.getSelection().focusNode.nodeValue.length - help_me_focusNodeValueLength > 0) {
   help_me_focusOffset += window.getSelection().focusNode.nodeValue.length - help_me_focusNodeValueLength;
  }
  window.getSelection().focusNode.nodeValue = help_me_focusNodeValue.slice(0, help_me_focusOffset) + help_me_lastTag + help_me_focusNodeValue.slice(help_me_focusOffset);
 });

});

.editableDiv{
 width: 300px;
 height: 100px;
 background: #ccc;
 padding: 10px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<button class="buttonBold">Bold</button>
<div class="editableDiv" contenteditable="true">
Double click this : HELPME
<br />
<br />
And then, click the "Bold" Button
<br />
The result will : &lt;b&gt;HELPME&lt;/b&gt;
<br />
Not : <b>HELPME</b>
</div>

Answer 1

您可以使用 window.getSelection() 和 .surroundContents()

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

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

如果你 select 部分节点（当突出显示的文本开始或停止在一个开放标签之间），你必须使用 extractContents() :

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

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

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

Demo

Javascript window.getSelection().focusNode.nodeValue return 与 HTML

Javascript window.getSelection().focusNode.nodeValue return with HTML

javascript

jquery

bbcode

nodevalue

html-editor