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，那么一定要继续。