追加到索引位置的jquery

Question

我正在尝试制作一个rtf样式的文本框。当我提醒选择时，我的选择会起作用。我试图在选择之前和之后添加一个。但是我尝试的所有东西都会附加到html的末尾。

我的HTML是非常简单的

<p id="textblock" contenteditable="true"> 
This is just a simple paragraph tag that is content editable. the plan is to make it responsive to RTF controls like bold, italics, and other options.  
</p> 

<button id="boldButton">BOLD</button> 
<button id="viewButton">ViewHtml</button> 
<button id="selection">ViewSelection</button> 

和我的jQuery是

$("#boldButton").click(function() { 
    Boldify(); 
}); 

$("#viewButton").click(function() { 
    alert($("#textblock").html()); 
}); 

$("#selection").click(function() { 
    alert(document.getSelection().toString()); 
}); 

function Boldify(){ 
    var startIndex = document.getSelection().getRangeAt(0).startOffset; 
    var endIndex = document.getSelection().getRangeAt(0).endOffset; 

$("<strong>").appendTo("#textblock").index(window.getSelection()); 
$("</strong>").appendTo("#textblock").index(endIndex); 
} 

这里是我的jsfiddle。 http://jsfiddle.net/3oaup7gn/我觉得我很接近。但我似乎失去了一些东西。我试图使用静态索引和getSelection（）索引，但它总是在做同样的事情。

Answer 1

您必须使用execCommand（）我的朋友，只需将其添加到Boldify（）函数。

document.execCommand('bold', false, true); 

阅读整个API：https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand