1

考虑以下问题：

有一个像这样的文本区域：

<textarea id="body" name="body"></textarea>

还有一些简单的 JavaScript (jQuery) 可以将一些新文本插入到 textarea 中，以便用户可以嵌入图像：

$('textarea').val($('textarea').val() + '[img]path to image file[/img]');

诀窍是在插入文本后自动突出显示[img][/img]标签之间的文本，这样用户就可以快速复制和粘贴他们的图像 URL，而不是手动选择，然后复制和粘贴。

我已经绞尽脑汁，在整个互联网上试图弄清楚这一点，我能做的最好的就是这个流行的 StackOverflow 问题Selecting text in an element（类似于用鼠标突出显示），它只解决了选择的问题整个元素内的文本，这不是这里想要的。问题是选择与某个字符串匹配的文本，在这种情况下path to image file，用户只需复制/粘贴即可。（不确定这是否是最好的方法，但这就是我的想法......）。

这可能吗？我猜我们会需要getSelection()，createRange()但除此之外，我不知道该去哪里……任何 JavaScript 向导已经想出了这个？我觉得这可能是一个受欢迎的问题。使用 jQuery 很好，因为我已经在文档的其余部分使用了它。

4

2 回答 2

1

实际上我自己想出了这个......我使用了 Rangy 库https://code.google.com/p/rangy/和这样的代码：

 // Add text to the reply area at the very end, and move the cursor to the very end.
function insertText(textarea, text) {
    textarea = $(textarea);
    textarea.focus();
    textarea.val(textarea.val() + text);
    textarea.focus();
    // Trigger the textarea's keyup to emulate typing.
    textarea.trigger("keyup");
}

// Add text to the reply area, with the options of wrapping it around a selection and selecting a part of it when it's inserted.
function wrapText(textarea, tagStart, tagEnd, selectArgument, defaultArgumentValue) {
textarea = $(textarea);
    // Save the scroll position of the textarea.
    var scrollTop = textarea.scrollTop();
    // Work out what text is currently selected.
    var selectionInfo = textarea.getSelection();
    if (textarea.val().substring(selectionInfo.start, selectionInfo.start + 1).match(/ /)) selectionInfo.start++;
    if (textarea.val().substring(selectionInfo.end - 1, selectionInfo.end).match(/ /)) selectionInfo.end--;
    var selection = textarea.val().substring(selectionInfo.start, selectionInfo.end);
    // Work out the text to insert over the selection.
    selection = selection ? selection : (defaultArgumentValue ? defaultArgumentValue : "");
    var text = tagStart + selection + (typeof tagEnd != "undefined" ? tagEnd : tagStart);
    // Replace the textarea's value.
    textarea.val(textarea.val().substr(0, selectionInfo.start) + text + textarea.val().substr(selectionInfo.end));
    // Scroll back down and refocus on the textarea.
    textarea.focus();
    // If a selectArgument was passed, work out where it is and select it. Otherwise, select the text that was selected
    // before this function was called.
    if (selectArgument) {
        var newStart = selectionInfo.start + tagStart.indexOf(selectArgument);
        var newEnd = newStart + selectArgument.length;
    } else {
        var newStart = selectionInfo.start + tagStart.length;
    var newEnd = newStart + selection.length;
    }
    textarea.selectRange(newStart, newEnd);
    // Trigger the textarea's keyup to emulate typing.
    textarea.trigger("keyup");
}

var bbcode = {
    bold: function(id) {wrapText($("textarea"), "[b]", "[/b]", "", "bolded text");},
};

示例用法：

bbcode.bold();

完整代码（在我做的一个更大的项目中）：https ://github.com/wnajar/textarea

于 2013-03-17T15:54:27.380 回答
1

你可以使用我的 jQuery 插件。它解决了文本区域选择操作中的浏览器差异，并有一些方便的方法：

https://code.google.com/p/rangyinputs/

对于您的示例，代码将是

var $textarea = $("#body");
var text = "path to image file"
$textarea.replaceSelectedText(text, "select");
$textarea.surroundSelectedText("[img]", "[/img]");

演示：http: //jsfiddle.net/P8Jrh/1/

于 2013-03-17T17:45:19.130 回答