jQuery文本編輯器

Question

我想制作一個jquery文本編輯器，並進行了一些谷歌搜索，並做了一些工作。基本功能是，當用戶在文本區域中突出顯示文本時，它將在前面添加[b]並在其中添加[/ b]文本的結尾，但是如果用戶再次單擊相同的按鈕，它將擦除所有輸入的數據，並且僅將高亮顯示的文本置於[b] [/ b]的位置，這是代碼：

$('#bold').mousedown(function(e) {
    var txt = '';
    if (window.getSelection){
        txt = window.getSelection();
    }
    else if(document.getSelection){
        txt = document.getSelection();
    }
    else if(document.selection){
        txt = document.selection.createRange().text;
    }
    else return;

    txt = "[b]"+txt+"[/b]";

    $('#reply').val(txt); 
});

html

<input type="button" value="Bold" id="bold" />
<form action="" method="get">
<textarea name="reply" id="reply" cols="100" rows="30">Test</textarea>
</form>

Answer 1

這是因為第一次單擊后將清除選擇。 因此，第二個替換項沒有要包裝的文本，因此只需將[b][/b]到文本區域。

嘗試將要進行替換的行包裝在if條件中，以檢查是否選擇了某些內容：

if (txt !== undefined && txt.length > 0) {
    txt = "[b]"+txt+"[/b]";
    $('#reply').val(txt);
}

但是，您的邏輯似乎有缺陷。 想象一下在文本區域中有以下文本：

Lorem ipsum dolor坐在amet。

如果我突出顯示ipsum並單擊#bold按鈕，則textarea將刪除所有其他單詞，現在只說：

[b] ipsum [/ b]

已經存在許多其他jQuery文本編輯器。 如果是生產項目，將為您節省大量時間來使用其中之一。 如果您只是想學習jQuery，那么一定要繼續。