Question

我试图制作一个简单的短信。它的工作正常，但我想在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
});

我现在看起来是什么，当我选择“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]仍在那里。

基本上它就像stackoverflow编辑器，但没有实时视图。谢谢你的进步，希望我找到答案。一直在看这个星期。

Answer 1

Sceditor具有类似的功能，是开源的。检查它是如何在这里完成的 http://www.sceditor.com/

Answer 2

找到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>

使用jquery（简单texteditor）

2 个答案: