0

divをクリックするとテキストエリアに挿入され、プレビューが表示されるコードがあります。テキストエリアに挿入されるコンテンツは画像ですが、画像をライブで表示するのではなく、テキストエリアに文字を入力する必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('.image').click(function(e){
    var tav    = $('#image_code').val(),
        strPos = $('#image_code')[0].selectionStart;
        front  = (tav).substring(0,strPos),
        back   = (tav).substring(strPos,tav.length); 
        $('#image_code').val(front + '<img src=\"' + $(this).attr("alt") + '\">' + back);
});
$('#image_code').keyup(function() {
   $('#image_preview').html( $(this).val() );
 });
});
</script>

<textarea id="image_code"></textarea>
<div id="image_preview"></div>

<div id="1" class="image" title="1" alt="http://xxxx.jpg">1</div>
<div id="2" class="image" title="2" alt="http://xxxx.jpg">2</div>
<div id="3" class="image" title="3" alt="http://xxxx.jpg">3</div>
<div id="4" class="image" title="4" alt="http://xxxx.jpg">4</div>
<div id="5" class="image" title="5" alt="http://xxxx.jpg">5</div>

私を助けてください。どうもありがとう！

4

2 に答える 2

1

内部に画像を挿入しようとしている場合は、残念ながらtextareaできません。テキストを処理するためだけに設計されています (WYSIWYG エディターは、これを回避するためにトリックを使用します)。

代わりに、contenteditablediv を使用するか、背景画像を設定してみてください。ただし、画像はテキストエリア内の実際の物理要素にはなりません。

于 2013-05-09T13:09:15.127 に答える
0

テキストエリアの値を設定した後、keyupイベントをトリガーする必要があります。

$('#image_code').val(front + '<img src=\"' + $(this).attr("alt") + '\">' + back).trigger('keyup')

デモ:フィドル

于 2013-05-09T13:09:12.607 に答える