javascript - 使用 jquery(简单的文本编辑器)向 textarea 添加值

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]。就像复制文本的值一样。

我要问的是，如何为所选文本增加值(value)(而不是替换它) 并在选择文本时制作 if 函数将添加 [b]abcd[/b] 否则将添加 [b] [/b] 而 [b]abcd[/b] 仍然存在。

基本上它会像 stackoverflow 编辑器，但没有实时 View 。感谢提前，希望我找到了答案。已经找了一个星期了。

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>