1

Принцип такой. После клика на button, div заменялся на textarea и сообщение отправлялось.

<div id="message" contenteditable="true"></div>
<button id="bsmile">Добавить</button>

$("#bsmile").click(function() {
 $('div#message').each(function() {
  $("#message").replaceWith(function(index, oldHTML) {
   return $("<textarea id='message' rows='3'>" + $(this).html() + "</textarea>")
    .html(oldHTML);
  })
 });
});

Но если в div какой-то html код, например картинка <img src="/opacity.png" в textarea она выглядит уже так &lt;img src="/opacity.png". Как сделать нормальный <img?

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа)
    – Doofy
    Commented 7 июн. 2016 в 7:33

2 ответа 2

4

Всё что находится в textarea имеет только текстовое свойство и не может содержать теги. Для этого есть div с атрибутом contenteditable='true'

c = document.getElementById('content');
b = document.querySelectorAll('button');

b[0].onclick = function() { c.innerText = '<font color=red>Font</font>'; }
b[1].onclick = function() { c.innerHTML = c.innerText; }
b[2].onclick = function() { c.innerText = c.innerHTML; }
.content {
  background: #F4F4F4;
  max-width: 256px;
  height: 96px;
  padding: 16px 16px;
  outline: none;
  cursor: text;
  margin-bottom: 16px;
}
<div id='content' class='content' contenteditable='true' placeholder='Контент'></div>

<button>paste</button>
<button>to html</button>
<button>to code</button>

16
  • Сделал пример codepen.io/stopani/pen/dXYRor то есть пишу в div знак <, то после нажатия на кнопку добавить этот div меняется на textarea и через инспектор видно что знак уже такой &lt;. как сделать чтоб этот знак < не менялся?
    – steep
    Commented 7 июн. 2016 в 10:15
  • @СергейЛапшин, всё что написано в div становится текстом, а не html элементом. В textarea не могут быть элементы html, только текст. Объясни толком что должно происходить?
    – Doofy
    Commented 7 июн. 2016 в 10:24
  • Мне нужно просто отправить картинку в комментарии. Дополнил пример codepen.io/stopani/pen/dXYRor
    – steep
    Commented 7 июн. 2016 в 10:34
  • @СергейЛапшин, если я правильно понял: Есть div, туда мы вставляем <img src='/opacity.png'> и после этого в div должна появиться картинка вместо текста, верно?
    – Doofy
    Commented 7 июн. 2016 в 10:36
  • Да, но когда div меняется на textarea получается текст и картинка отправляется с ошибкой &lt;img src=" и в комментарии уже выводится просто текстом из-за этого &lt;
    – steep
    Commented 7 июн. 2016 в 10:42
2

Коллеги, между

<textarea ...> 

и

</textarea> 

вы можете вставить любой текст с тегами, и этот текст прекрасно отобразится. Поэтому в скрипте должна быть выполнена следующая последовательность действий:

  1. Вычисляете innerHtml родительского элемента для textarea.
  2. Заменяете операциями над строками в нем строку между

    <textarea ...> 
    

    и

    </textarea> 
    

    на нужный вам текст с тегами.

  3. Присваиваете innerHtml родительского элемента для textarea новое значение.

И все...

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.