5

テキストエリアに新しい「クリックしてテキストを挿入」ボタンを追加する簡単なオプションを提供するjavascriptの検索に約2時間費やしましたが、残念ながら探しているものが見つかりませんでした。

私はテキストエリアを持っています:

<textarea name="user-submitted-content" rows="5" data-required="true" placeholder="<?php _e('Post Content', 'usp'); ?>" class="usp-textarea"></textarea>

次のようなJavaScriptが必要です。

    var newText = "[" + shortcode + "]" + selectedText + "[/" + shortcode + "]";

そして、次のようなボタンを追加できます。

<input type="button" value="youtube" onclick="formatText ('youtube');" /> 
<input type="button" value="text" onclick="formatText ('text');" />

ボタン「youtube」をクリックすると[youtube][/youtube]、テキストエリアに追加/挿入する必要があります。

上記のコードは、テキストエリア内の選択したテキストをタグで囲む JavaScript の一例から取ったものです。

<script type="text/javascript"> 
<!-- 
    function formatText (tag) { 
        var selectedText = document.selection.createRange().text; 

        if (selectedText != "") { 
            var newText = "[" + tag + "]" + selectedText + "[/" + tag + "]"; 
            document.selection.createRange().text = newText; 
        } 
    } 
//--> 
</script> 

<form name="my_form"> 
    <textarea name="my_textarea"></textarea><br /> 
    <input type="button" value="bold" onclick="formatText ('b');" /> 
    <input type="button" value="italic" onclick="formatText ('i');" /> 
    <input type="button" value="underline" onclick="formatText ('u');" /> 
</form>

いくつかの変更を加えることで、これも私が望むものに使用できると思います。私は本当にこれが必要です。

4

2 に答える 2

2

テキストエリアにテキストを追加:

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('mytextarea');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value += '[' + tag + ']' + '[/' + tag + ']';
}
</script> 

<form name="my_form"> 
    <textarea id="mytextarea"></textarea><br /> 
    <input type="button" value="youtube" onclick="formatText ('youtube');" /> 
    <input type="button" value="dailymotion" onclick="formatText ('dailymotion');" /> 
    <input type="button" value="vimeo" onclick="formatText ('vimeo');" /> 
</form>

テキストエリアのテキストを置き換えます:

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('mytextarea');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value = '[' + tag + ']' + '[/' + tag + ']';
}
</script> 

<form name="my_form"> 
    <textarea id="mytextarea"></textarea><br /> 
    <input type="button" value="youtube" onclick="formatText ('youtube');" /> 
    <input type="button" value="dailymotion" onclick="formatText ('dailymotion');" /> 
    <input type="button" value="vimeo" onclick="formatText ('vimeo');" /> 
</form>

例

追加: http://jsfiddle.net/aSgFa/

置き換え: http://jsfiddle.net/bAQEs/

また： 

<script type="text/javascript"> 
function formatText(tag) {
   var Field = document.getElementById('user-submitted-content');
   var val = Field.value;
   var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
   var before_txt = val.substring(0, Field.selectionStart);
   var after_txt = val.substring(Field.selectionEnd, val.length);
   Field.value += '' + tag + '';
}
</script>

<div class="buttons">
    <input type="button" value="youtube" onclick="formatText ('[video]YouTubeURL[/video]\n[description]Write your description[/description]');" />  
</div>
于 2013-10-12T06:23:39.010 に答える