HTML: есть ли способ показать изображения в текстовом поле?

Поэтому я хочу показать image thumbnails тоже в <textarea> вместе с текстом. Если вы знаете идеальное решение для javascript (если возможно в vanilla JS).

Нравится:

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

Насколько я знаю и видел в div или чем-то еще, что contentEditable="true" также разрешает изображение, но допускает многие другие HTML-теги и многое другое, чего я не хочу: |

Я хочу только text и images.


image html textarea photo thumbnails
person Adam Halasz    schedule 25.09.2010    source источник

Ответы (5)


arrow_upward
69
arrow_downward

Используйте div с атрибутом contentEditable, который действует как текстовое поле. Вот как создаются 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>

person Hussein    schedule 09.04.2011
comment
Пример делает действительно странные вещи, когда я пытаюсь вставить новые строки. По крайней мере в Хроме. - person aroth; 29.05.2014
comment
@aroth Похоже, это потому, что каждая новая строка создает новый элемент div, а каждый div имеет свойства ширины, высоты и границы. - person KhalilRavanna; 17.03.2015

arrow_upward
10
arrow_downward

Я понимаю, что вы хотите редактировать текст и изображения, но... почему это должно быть внутри текстового поля? Такой элемент управления предназначен для хранения простого текста. Есть много HTML-редакторов, написанных на JavaScript:

person Álvaro González    schedule 25.09.2010
comment
Потому что я не хочу создавать сложный редактор, как я уже сказал, мне нужны только text и photos. - person Adam Halasz; 25.09.2010
comment
Вопрос пользователя касался именно текстовой области. - person Dustin Oprea; 14.07.2012
comment
@DustinOprea - это невозможно. Период. Элемент <textarea> может содержать только обычный текст, а не другие узлы. - person Álvaro González; 15.07.2012

arrow_upward
3
arrow_downward

Короткий ответ: нет, это невозможно, извините.

person thomasmalt    schedule 25.09.2010
comment
Спасибо за ответ @thomasmalt, тогда что вы предлагаете, как мне это сделать? - person Adam Halasz; 25.09.2010
comment
Я не уверен, чего вы пытаетесь достичь. Вы хотите использовать textarea с изображениями для отображения вашего контента пользователю, или вы хотите использовать textarea в форме, где пользователь вводит текст и загружает изображения? - person thomasmalt; 25.09.2010

arrow_upward
1
arrow_downward

вы можете использовать css для установки фонового изображения для textarea и js для установки текста

person yangqi    schedule 25.09.2010
comment
Мне не нужен фон для текстового поля, я хочу, чтобы внутри текстового поля были изображения. Или вы хотите взломать текстовое поле с фоном, чтобы оно выглядело так, как будто внутри текстового поля есть изображение? Если да, то это не очень хорошая идея, потому что будет несколько изображений, которые также можно обновлять и удалять. Отредактировал мой вопрос, чтобы проиллюстрировать его. - person Adam Halasz; 25.09.2010
comment
Насколько я знаю, вы не можете использовать изображения в текстовой области, ни фоновое изображение, установленное с помощью CSS, ни элемент img. - person matsolof; 25.09.2010
comment
Я не знаю, что вы хотите сделать, но вы можете вставить в текстовое поле что угодно, кроме обычного текста. Хотя вы можете использовать CSS для установки фонового изображения для текстовой области, если вы хотите изменить его, вы можете использовать javascript для изменения фона. - person yangqi; 25.09.2010

arrow_upward
0
arrow_downward

Вы можете написать скрипт (в идеале на PHP), который проверяет наличие нежелательного элемента (кроме <p> или <img>).

Затем вы можете отправить пользователя обратно в форму и позволить ему заполнить форму снова, или вы можете удалить все ненужные теги.

person MetropolisCZ    schedule 16.04.2021