使用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/