HTML:有没有办法在textarea中显示图像？

Question

所以我想image thumbnails在<textarea>文字中也显示出来.如果你知道一个完美的javascript解决方案(如果可能在vanilla JS中).

像这样:

__________________
|Hello World     |
|  _______       |
|  | Img |       |
|  |     |       |
|  |_____|       |
|Hello again.    |
|  _______       |
|  | Img2|       |
|  |     |       |
|  |_____|       |
|________________|

正如我所知道并在div或任何东西中看到的也contentEditable="true"允许图像,但是,允许许多其他HTML标签和许多我不想要的东西:

我想要text和images.

Answer 1

使用带有contentEditable属性的div,其作用类似于textarea.这就是wysiwyg编辑器的创建方式.

div {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

<div contentEditable="true">Type here. You can insert images too
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>

Answer 2

我知道你想编辑文字和图片,但是...为什么它必须在textarea里？这种控制旨在保存纯文本.有许多用JavaScript编写的HTML编辑器:

• http://ckeditor.com/
• http://tinymce.moxiecode.com/
• http://www.openwebware.com/
• http://www.unverse.net/whizzywig-cross-browser-html-editor.html
• http://www.htmlarea.com/
• ...

Answer 3

您可以使用css为textarea设置背景图片，并使用js设置文本