Как сделать текстовый редактор чата в html, способном отображать png-смайлик?

Question

Я пытаюсь выяснить способ создания текстового редактора для веб-страницы, способной отображать png-изображения (смайлы), и получить текст, набранный и смайлики (возможно, идентификаторы или что-то в этом роде), используя чистый javascript.

Я натолкнулся на «contenteditable», где я могу использовать div, но я могу выяснить, как получить то, что было введено в javascript.

Любые предложения? Я не хочу использовать JQuery, я буду только с использованием чистых JS

Answer 1

Вы можете использовать <img> тег внутри contenteditable элемента, и вы можете использовать HTML input event, чтобы сохранить изменения

<div contenteditable="true" id="editor">See: <img src="//i.stack.imgur.com/nO2hl.png"/> <img src="//i.stack.imgur.com/iUDpH.png"/> all your text goes here with img<img src="//i.stack.imgur.com/QrKSV.png"/></div> 

стиль вы contenteditable ДИВ:

[contenteditable] { 
    border: 1px solid #000; 
    line-height: 1.4em; 
    -webkit-appearance: textfield; 
    appearance: textfield 
} 
img { 
    vertical-align: top; 
    max-height: 1.5em; 
    max-width: 1.5em; 
} 

Демо: http://jsfiddle.net/rpdheeya/