0

我在这里有我的代码，当我单击一个 div 时，它将插入到 textarea 并显示其预览。将插入 textarea 的内容是图像，但它不会实时显示图像，而是需要在 textarea 上键入一个字符。

<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那么恐怕您不能：它们仅用于处理文本（所见即所得编辑器使用技巧来解决此问题）。

相反，您可以使用contenteditablediv，或尝试设置背景图像......但图像不会是文本区域中的实际物理元素。

于 2013-05-09T13:09:15.127 回答
0

您需要在设置 textarea 的值后触发keyup事件。

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

演示：小提琴

于 2013-05-09T13:09:12.607 回答