追加到索引位置的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