Question

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

我想学习＆＃34;如何创造＆＃34;不是＆＃34;如何使用＆＃34;

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

My editor

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

时

我有一点问题（可能是我最大的问题）当然，在搜索之后提出问题是我最后的希望......

无论如何，我的英语很糟糕，所以我希望你能理解我所说的。

看，我的期望VS真的

Expectation VS Really

这是我编辑中最简单的

＆＃13;

$(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);
	});

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);
});

如果选择部分节点（当突出显示的文本在打开的标记之间开始或停止时），则必须使用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返回HTML

1 个答案: