......我真的不想使用其他人编辑器...
我想学习“如何创建”而不是“如何使用”
所以我决定创建自己的编辑器...
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 : <b>HELPME</b>
<br />
Not : <b>HELPME</b>
</div>
最佳答案
您可以使用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 - Javascript window.getSelection()。focusNode.nodeValue返回HTML,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43710985/