Jquery Html文本编辑器选择

Question

我想让自己的html文本编辑器非常简单。当我点击Bold按钮时，在textarea中，必须插入[B] boldtext [/ B]和“boldtext”可以像这张照片一样选择。

我写了代码，

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上测试过，在不同的浏览器中可能会有不同的行为。