1

私は JavaScript を使用して、ボタンをクリックしたときに掲示板コードをテキストエリアに挿入する非常に単純なコードを作成しています。
私が書いたコードは問題なく動作しますが、新しいタグをテキストの末尾ではなくカーソルに配置し、カーソルを新しいタグの中央に配置できるようにしたいと考えています。
例: 現在、ユーザーが b、u、s の順にクリックすると、 と表示され[b][/b][u][/u][s][/s]ます。カーソル[b][u][s]^[/s][/u][/b]がどこにあるかなどのことができるようにしたいと思います。^これを行う簡単な方法はありますか？

<script type="text/javascript">

   function addTag(prefix, suffix){

       texteditor = document.getElementById("texteditor");

       texteditor.innerHTML += '[' + prefix + ']' + '[' + suffix + ']';

}
</script>

<ul class="wysiwyg">
    <li><a href"#" title="Bold" class="bold" onclick="addTag('b', '/b'); return false;"></a></li>
    <li><a href"#" title="Underline" class="underline" onclick="addTag('u', '/u'); return false;"></a></li>
    <li><a href"#" title="Strike Through" class="strikethrough" onclick="addTag('s', '/s'); return false;"></a></li>
    <li><a href"#" title="Italicize" class="italics" onclick="addTag('i', '/i'); return false;"></a></li>
</ul>
4

1 に答える 1

0

まず、テキストエリア内のテキストを変更するには、valueではなくプロパティを使用しますinnerHTML。ほとんどのブラウザでは、ユーザーがテキストエリアを操作した後は機能しません。texteditorまた、あなたの例のようにvar（またはletES6で）変数を宣言する必要があります。

実際の問題に関しては、テキストエリアのselectionStartおよびプロパティを使用する必要があります。selectionEndjQuery を使用している場合は、このプラグイン(私が作成したもの) を使用すると便利ですsurroundSelectedText。メソッドがあります。

$("#texteditor").surroundSelectedText("<b>", "</b>");

selectionStartそれ以外の場合は、およびselectionEndプロパティをサポートしない IE <= 8 を除いて、これを実行するコードを次に示します。古い IE のサポートについては、jQuery プラグインのソース コードを参照することをお勧めします。

デモ: http://jsfiddle.net/mLkNV/

コード：

function addTag(prefix, suffix) {
    var texteditor = document.getElementById("texteditor");
    var val = texteditor.value;
    var start = texteditor.selectionStart;
    var end = texteditor.selectionEnd;

    // Insert the prefix and suffix
    texteditor.value = val.slice(0, start) +
        '[' + prefix + ']' + val.slice(start, end) + '[' + suffix + ']' +
        val.slice(end);

    // Reset the selection
    texteditor.selectionStart = start + prefix.length + 2;
    texteditor.selectionEnd = texteditor.selectionStart + (end - start);
}
于 2013-06-26T11:19:46.997 に答える