1

次の問題を考えてみましょう。

次のようなテキストエリアがあります。

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

また、ユーザーが画像を埋め込むことができるように、テキストエリアに新しいテキストを挿入する簡単なJavaScript（jQuery）があります。

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

秘訣は、テキストが挿入された後、タグの間にあるテキストを自動的に強調表示することです。[img][/img]これにより、ユーザーは手動で選択してからコピーして貼り付けるのではなく、画像のURLをすばやくコピーして貼り付けることができます。

私は頭を悩ませてこれを理解しようとインターネット中を行き来しました、そして私ができる最善のことはこの人気のあるStackOverflowの質問でした要素内のテキストの選択（マウスでの強調表示に似ています） ENTIRE要素内のテキスト。これはここで必要なものではありません。問題は、特定の文字列（この場合は）に一致するテキストを選択することです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 に答える