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

Question

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

34

所以我想在中显示文本的同时也显示图片缩略图。如果您知道JavaScript解决方案，那么最好使用纯JS（如果可能的话）。 像这样：<pre class="guess-Ruby"><code>__________________ |Hello World | | _______ | | | Img | | | | | | | |_____| | |Hello again. | | _______ | | | Img2| | | | | | | |_____| | |________________| </code></pre>据我所知，在具有<code>contentEditable="true"</code>属性的 div 或任何其他元素中，可以插入图片，但是它也允许许多其他 HTML 标记和我不想要的很多东西 :| 我只想要 <code>文本</code> 和 <code>图片</code>。

- Adam Halasz

5个回答

11

我理解您想要编辑文本和图片，但为什么必须在textarea内进行呢？这样的控件只能容纳纯文本。有许多使用JavaScript编写的HTML编辑器：

- Álvaro González

1

因为我不想建立一个复杂的编辑器，正如我所说，我只想要“文本”和“照片”。 - Adam Halasz

用户的问题特别涉及文本区域。 - Dustin Oprea

4

@DustinOprea - 这是不可能的。<textarea> 元素只能容纳纯文本，而不能包含其他节点。 - Álvaro González

2

简短的回答是不行，很抱歉。

- thomasmalt

1

谢谢您的回答@thomasmalt，那么您建议我该怎么做呢？ - Adam Halasz

我不确定你想要实现什么。你是想使用带有图片的文本区域来向用户展示内容，还是想在表单中使用文本区域，让用户提供文本并上传图片？ - thomasmalt

1

你可以使用 CSS 为文本区域设置背景图片，使用 JS 设置文本。

- yangqi

我不想为文本区域设置背景，我想在文本区域内放置图片。或者你是指通过设置文本区域的背景来模拟图片在其中的效果？如果是这样的话，那并不是一个好主意，因为会有多张图片，并且这些图片可能会被更新和删除。我修改了我的问题以更好地说明这一点。 - Adam Halasz

据我所知，在文本区域中无法使用图片，无论是通过CSS设置的背景图片还是img元素。 - matsolof

我不知道你想做什么，但你可以在文本区域内插入任何东西，除了纯文本。虽然你可以使用CSS为文本区域设置背景图像，但如果你想要更改它，那么你可以使用JavaScript来更改背景。 - yangqi

0

你可以编写一个脚本（最好是用PHP），检查是否存在不需要的元素（除了或<img>之外）。

然后，你可以将用户发送回“表单”让他重新填写，或者你可以删除整个不需要的标签。

- MetropolisCZ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hussein · Accepted Answer

使用带有contentEditable属性的div，它类似于textarea。这就是所谓的所见即所得编辑器的创建方式。

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>