自定义textarea里面的图像

Question

我想知道在很多网站上，当我在textarea上添加微笑而不是ex. :)时会出现图像，所以我想问你怎么可能，我需要一个简单的例子......

例如，

我有：

<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>

所以我希望onclick of image（.smile）在textarea上添加图像，然后可以在图像之后插入一些单词，或者只是解释一下它是如何完成的（是否有<div>元素或它是<textarea>或idk它可以是什么..）

感谢

Answer 1

您在许多网站上看到的不是文本区域。它是一个带有contentEditable属性的div，其作用类似于textarea。这就是如何创建所见即所得的编辑器。

<div contentEditable="true"> Type here. You can insert images too </div>

检查http://jsfiddle.net/6bCRJ/

处的工作示例