使用jQuery（簡單的文本編輯）

Question

我嘗試做一個簡單的文本編輯增值textarea的。它的工作很好，但我想在textarea的選定文本上添加文本。

在我的代碼，當我點擊加粗按鈕，它會顯示[B] [/ B]用光標聚焦b標籤內，當我再次單擊該按鈕，它會再次顯示b標籤內。 （這是我想不介意這個代碼）

function typeInTextarea(el, newText) 
{ 
    var start = el.prop("selectionStart") 
    var end = el.prop("selectionEnd") 
    var text = el.val() 
    var before = text.substring(0, start) 
    var after = text.substring(end, text.length) 

    el.val(before + newText + after) 
    el[0].selectionStart = el[0].selectionEnd = start - 4 + newText.length 
    el.focus() 
    return false 
} 

$("#button-bold").on("click", function() 
{ 
    typeInTextarea($("#textareapost"), "[b][/b]") 
    return false 
}); 

什麼IM，現在看就是，當我選擇「ABCD」然後我按一下按鈕，它會顯示[B] ABCD [/ B]，我成功使用此代碼：

function typeInTextarea(el, newText) 
{ 
    var start = el.prop("selectionStart") 
    var end = el.prop("selectionEnd") 
    var text = el.val() 
    var before = text.substring(0, start) 
    var after = text.substring(end, text.length) 


    el.val(before + newText.substring(0,3) + after + newText.substring(3,7)) //i making change in this one 
    el[0].selectionStart = el[0].selectionEnd = newText.length + end 
    el.focus() 
    return false  
} 

，但是當我沒有選擇 「ABCD」 的文本，它會顯示[b] ABCD [/ b] [b] [ABCD/b]。就像複製文本的價值一樣。

即時通訊要求的是，如何在選定的文本上添加數值（而不是替換它） 並且在選擇文本的情況下使if函數增加[b] abcd [/ b]否則會增加[b] [/ b]而[b] abcd [/ b]仍然存在。

basicly它會像計算器編輯器，但沒有實時取景。感謝提前，希望我找到答案。一直在尋找這個數週。

Answer 1

找到1個回答
JQUERY Set Textarea Cursor to End of Text 並修改

var b = { pos: 3, txt: function(s){ return '[b]' + s +'[/b]'; }} 
 

 
$.fn.selectRange = function(start, end) { 
 
    return this.each(function() { 
 
     if (this.setSelectionRange) { 
 
      this.focus(); 
 
      this.setSelectionRange(start, end); 
 
     } else if (this.createTextRange) { 
 
      var range = this.createTextRange(); 
 
      range.collapse(true); 
 
      range.moveEnd('character', end); 
 
      range.moveStart('character', start); 
 
      range.select(); 
 
     } 
 
    }); 
 
}; 
 

 
$('#this-b').on('click',function(e){ 
 
    var cc = $('#this-txta')[0].selectionStart; 
 
    var str = $('#this-txta').val(); 
 
    var en = $('#this-txta')[0].selectionEnd; 
 
    var sstr = str.substring(cc,en); 
 
    $('#this-txta').val(str.substring(0, cc) + b.txt(sstr) + str.substring(en)).focus(); 
 
    var pst = cc + b.pos 
 
    var pen = en + b.pos 
 
    $('#this-txta').selectRange(pst,pen); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="this-b"><b>B</b></button> 
 
<br/> 
 
<textarea id="this-txta">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>

Answer 2

Sceditor也有類似的功能，而且是開源的。 檢查它是如何在這裏完成 http://www.sceditor.com/