HTML：有没有办法在文本区域中显示图像？

Posted 2023-03-29

【中文标题】HTML：有没有办法在文本区域中显示图像？

【英文标题】：HTML : Is there any way to show images in a textarea?

【发布时间】：2011-04-17 02:59:27

【问题描述】：

所以我想在<textarea> 中也显示image thumbnails 以及文本。如果你知道一个完美的 javascript 解决方案（如果可能在 vanilla JS 中）。

像这样：

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

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

我只想要text 和images。

【参考方案1】：

可以用css为textarea设置背景图片，用js设置文字

【讨论】：

我不想要 textarea 的背景，我想在 textarea 中有图像。或者你的意思是用背景破解textarea，这样看起来textarea里面有一个图像？如果是，那么这不是一个好主意，因为会有多个图像，并且也可以更新和删除。编辑我的问题来说明它。

据我所知，您不能在 textarea 中使用图像，既不能使用 CSS 设置的背景图像，也不能使用 img 元素。

我不知道你想做什么，但你可以在 textarea 中插入除纯文本之外的任何内容。虽然您可以使用 CSS 为 textarea 设置背景图片，但如果您想更改它，您可以使用 javascript 来更改背景。

【参考方案2】：

简短的回答是不，这是不可能的，对不起。

【讨论】：

感谢您回答@thomasmalt，那么您建议我该怎么做？

我不确定你想要达到什么目的。您想使用带有图片的 textarea 来向用户展示您的内容，还是要在用户提供文本和上传图片的表单中使用 textarea？

【参考方案3】：

我知道您想编辑文本和图片，但是...为什么必须在文本区域内？此类控件旨在保存纯文本。有很多用 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/ ...

【讨论】：

因为我不想构建一个复杂的编辑器，正如我所说的，我只想要text 和photos。

用户的问题是专门针对文本区域的。

@DustinOprea - 这是不可能的。时期。 <textarea> 元素只能保存纯文本，不能保存其他节点。

【参考方案4】：

使用具有 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>

【讨论】：

如果我尝试插入换行符，这个例子确实很奇怪。至少在 Chrome 中。

@aroth 看起来是因为每个换行符都会创建一个新的div 元素，并且每个div 都有宽度、高度和边框属性。

【参考方案5】：

您可以编写一个脚本（最好使用 php）来检查是否有不需要的元素（<p> 或 <img> 除外）。

然后您可以将用户送回“表单”并让他再次填写，或者您可以删除整个不需要的标签。