當使用javascript或jquery按下按鈕時，在textarea中插入圖像？

Question

我在html中設計了一個textarea和按鈕。我想在按下按鈕時在textarea中插入圖像。如何在JavaScript或jQuery中可能？

Answer 1

Textareas只能包含文本。

Answer 2

Textareas只能包含文本，但可以重疊元素。這裏是一個例子：http://jsfiddle.net/2qMb3/1/

這使用了一個樣式的div而不是圖像，但你可以很容易地使用圖像，而不是div。

Answer 3

至於對方說的TextArea只包含文本，但你可以嘗試這樣的事：

<textarea id="x" rows="5" cols="20">hellooo</textarea> 

$('#buttonId').click(function(){ 
    $('#x').css('background',urlOfImage) 
}); 

Here是一個工作示例;你必須根據你的要求操縱它。

Answer 4

您可能想使用WYSIWYG編輯器，如TinyMCE或CKEditor。

Answer 5

您可以使用jQuery簡單的CSS添加到文本區域上單擊

的HTML

<textarea id="message" rows="2" cols="20"></textarea> 
<input type="button" value="Add image to textarea" id="add_image" /> 

的CSS：

<style> 
#message{ 
    padding-left : 30px; // This will prevent the text from overlapping the image 
} 
#add_image{ 
display: block; //just making the button appear in its own line 
} 
</style> 

的JavaScript：

<script> 
$(document).ready(function() { 
    $('#add_image').click(function() { 
     $('#message').css({ 
      'background' : 'url(http://lorempixel.com/20/40) no-repeat', 
     }); 
    }); 
}); 
</script> 

看到它在行動： http://jsfiddle.net/gksTQ/