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上測試過它，它在不同瀏覽器中的行為可能會有所不同。