PNG 스마일을 표시 할 수있는 HTML로 채팅 텍스트 편집기를 만드는 방법은 무엇입니까?

Question

나는 순수한 자바 스크립트를 사용하여 png 이미지 (스마일)를 표시하고 타이핑 한 텍스트와 스마일 (아마 ids 또는 그와 비슷한 것)을 얻을 수있는 웹 페이지 용 텍스트 편집기를 만드는 방법을 생각해보고 있습니다.

나는 div를 사용할 수있는 "contenteditable"을 보았지만 javascript에서 입력 한 내용을 검색하는 방법을 알아낼 수 있습니다.

제안 사항? 난 내가 순수한 JS

Answer 1

당신은 contenteditable 요소 내부 <img> 태그를 사용할 수 있습니다 당신은

<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 사업부 변경 사항을 캡처하기 위해 HTML input event을 사용할 수를 사용하고, jQuery를 사용하고자하지 않다 :

[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/

지금 내가 텍스트에 대해 적어도 삽입 된 이미지의 목록,하지만 무엇을 얻을 수있는 방법을 참조