HTML：有什么办法可以在textarea中显示图片吗？ [英] HTML : Is there any way to show images in a textarea?

问题描述

因此，我想在< textarea> 中同时显示图片缩略图。如果你知道一个JavaScript解决方案也是完美的（如果可能的话，在香草JS中）。

像这样：

  __________________ 
 | Hello World | 
 | _______ | 
 | | Img | | 
 | | | | 
 | | _____ | | 
 |你好。 | 
 | _______ | 
 | | IMG2 | | 
 | | | | 
 | | _____ | | 
 | ________________ | 
  

据我所知，在div或任何东西中看到 contentEditable =真正的允许图片太多，但是，允许许多其他HTML标签和许多我不想要的东西：|

我只想要 text 和 images 。

解决方案 div>

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

$ b

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

< div contentEditable =true>在此输入。您也可以插入图片< img src =http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1/>< / div>

So I want to show image thumbnails too in the <textarea> along with text. If you know a javascript solution that's perfect too(if possible in vanilla JS).

Like this:

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

As I know and seen in a div or anything what has contentEditable="true" allows image too but, allows many other HTML tags and a lots of things what I don't want :|

I want just text and images.

解决方案

Use a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.

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>

这篇关于HTML：有什么办法可以在textarea中显示图片吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！