Jquery Html文本编辑器选择

Question

我想使我自己的HTML文本编辑器非常简单的代码。当我点击粗体按钮时，在textarea中，必须插入[B] boldtext [/ B]，并且可以选择“boldtext”像这张照片。

我写tihs代码，

function TextEditor(startSyntax,endSyntax,elementID) 
{ 
    var textarea = $('#' + elementID) 
    var start = textarea[0].selectionStart; 
    var end = textarea[0].selectionEnd; 
    var text = textarea.val(); 

    if (start == end) { 
     return text.substring(0,start) + startSyntax + "text" + endSyntax + text.substring(end,text.lenght); 
    }; 
    return text.substring(0,start) + startSyntax + text.substring(start, end) + endSyntax + text.substring(end,text.lenght); 
} 


$("#btnKaydet").on("click", function() { 
    $("#txtMesaj").val(TextEditor("[B]","[/B]","txtMesaj")); 
}); 

我写的插入文本，但它添加标签，就像在照片后，没有选择“boldtext”文本。 我如何使用jQuery来做到这一点？ 谢谢

Answer 1

你将不得不编写一个函数来选择以前选择的文本。由于您正在更改textarea中的整个文本，因此它不会记得之前选择的内容。这里有一个关于如何做到这一点的示例函数的链接。

http://programanddesign.com/js/jquery-select-text-range/

代码解决方案：

function TextEditor(startSyntax,endSyntax,elementID) 
{ 
    var textarea = $('#' + elementID) 
    var start = textarea[0].selectionStart; 
    var end = textarea[0].selectionEnd; 
    var text = textarea.val(); 

    if (start == end) { 
     textarea.val(text.substring(0,start) + startSyntax + "text" + endSyntax + text.substring(end,text.lenght)); 
    } 
    else 
    { 
     textarea.val(text.substring(0,start) + startSyntax + text.substring(start, end) + endSyntax + text.substring(end,text.lenght)); 
    } 

    selectText(textarea[0], start+3, end + 3); 
} 

$("#btnKaydet").on("click", function() { 
    TextEditor("[B]","[/B]","txtMesaj") 
}); 

function selectText(input, start, end) 
{ 
     if(input.setSelectionRange) { 
      input.focus(); 
      input.setSelectionRange(start, end); 
     } else if(input.createTextRange) { 
      var range = input.createTextRange(); 
      input.collapse(true); 
      input.moveEnd('character', end); 
      input.moveStart('character', start); 
      input.select(); 
     } 
} 

的jsfiddle：http://jsfiddle.net/wPLBy/12/

注：我只测试了Chrome上，它可以表现不同的不同的浏览器。