HTML：有什么方法可以在文本区域中显示图像吗？

发布于 2024-09-25 01:23:00 字数 564 浏览 5 评论 0原文

因此，我也想在 </code> 中与文本一起显示<code>图像缩略图</code>。如果你知道一个也很完美的 javascript 解决方案（如果可能的话在 vanilla JS 中）。

像这样：

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

据我所知，在 div 或任何具有 contentEditable="true" 的内容中也允许图像，但允许许多其他 HTML 标签和很多我不想要的东西：|

我只想要文本和图像。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜尕妞 2024-10-02 01:23:00

使用具有 contentEditable 属性的 div，其作用类似于文本区域。这就是所见即所得编辑器的创建方式。

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>

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>

回复收藏 0 原文

烈酒灼喉 2024-10-02 01:23:00

我知道您想编辑文本和图片，但是......为什么它必须位于文本区域内？此类控件旨在保存纯文本。有许多用 JavaScript 编写的 HTML 编辑器：

回复收藏 0 原文

咿呀咿呀哟 2024-10-02 01:23:00

简短的回答是否定的，这是不可能的，抱歉。

回复收藏 0 原文

与风相奔跑 2024-10-02 01:23:00

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

回复收藏 0 原文

携君以终年 2024-10-02 01:23:00

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>

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>

回复收藏 0 原文