入力テキスト内の画像

[contenteditable] {border：1px solid＃000;行の高さ：1.4em; -webkit-外観：テキストフィールド;外観：textfield} img {vertical-align：top;最大高さ：1.4em;最大幅：1.4em; }
これは入力要素：
見る：   このフィールド内でこれらの画像をコピーして貼り付けることもできます   
JavaScriptを追加して、画像/アイコンをフィールドに動的に挿入することもできます。ファンシーになりたい場合は、キャレットの位置に画像を挿入できます。
 
 
 
document.querySelector（ '。selectable-icons'）。addEventListener（ 'click'、function（e）{if（e.target.tagName.toLowerCase（）=== 'img'）{document.querySelector（ '[contenteditable] '）.appendChild（e.target.cloneNode（true））;}}）;
[contenteditable] {border：1px solid＃000;マージン：0.4em 0;行の高さ：1.4em; -webkit-外観：テキストフィールド;外観：テキストフィールド; } img {vertical-align：top;最大高さ：1.4em;最大幅：1.4em; } .selectable-icons img {カーソル：ポインタ; }
アイコンをクリックするだけで追加できます。
           ここに入力できます。アイコンを追加します。
 
内部でUnicodeを使用するエレメント：
 
それが不可能な場合は、Unicode文字を使用する必要があります。これが、iOSおよびAndroidデバイスでの絵文字の動作方法です。
 
たとえば、FontAwesomeユニコード文字をエレメント。同様に、アイコン/画像の独自のライブラリを作成し、それらをUnicode文字で表すことができます。
 
 
 
 
Font awesomeアイコン（unicode）：
 
標準のUnicode：
   
レンダリングすることはできません入力にimgタグがありますが、別の簡単な解決策は、タグを次のように配置することです。 プレーンテキスト コンテナに表示します。
 
  ノート：  
 
 
以下の例を拡張して、タグ全体を削除できます現在は実装されていませんが。
 
このソリューションが存在する理由は、 いくつかの理由であなたは望まない 使用する@ josh-crozierによって記述されたcontenteditable、
 
このソリューションは、 隠れた テキスト入力とディスプレイに、を使用して結果が表示されます 仮想キーボード （スマートフォンのキーボードのように）。
 
 
この例では、絵文字をクリックしてキャレットの位置に追加し、入力をクリックすると、カーソルが入力の最後の位置に移動します。
 
var $ emoji = $（ '。emoji'）; var $ content = $（ '。content'）; var $ display = $（ '。display'）; var initial = '私はあなたが 今'; $ content.val（initial）; $ display.html（$ content.val（））; $ emoji.click（function（）{var html = $（this）[0] .outerHTML; insertText（html）; $ display.html（$ content.val（））;}）; $ content.on（ 'キーアップペーストの変更'、function（）{$ display.html（$ content.val（））;}）; $ content.focus（function（）{this.selectionStart = this.selectionEnd = this.value.length;}）; function insertText（text）{var cursorPosition = $ content.prop（ 'selectionStart'）; var value = $ content.val（）; var textBefore = value.substring（0、cursorPosition）; var textAfter = value.substring（cursorPosition、value.length）;値= textBefore + text + textAfter; $ content.val（value）; $ content.prop（ 'selectionStart'、value.length）; $ content.focus（）; }
.display {border：1px solid＃000;行の高さ：1.4em;最小-高さ：20px; } .display img {vertical-align：top;幅：1.4em}
挿入する絵文字を選択します。
     
結果：編集： 
これらの結果を得るには、独自のWYSIWYGエディターを作成する必要があります。または、この前の質問を見ることができます。
 
要するに：
  
 
アプローチ：スマイリーのパターンに一致する場合はユーザーが入力したすべてのテキストを読み、スマイリーが一致する場合は画像フォルダーからそれぞれの.gifを取得する必要があります。
 
クイックスタートについては、次のリンクを参照してください。絵文字のリストを写真に置き換えます
 
 
これがお役に立てば幸いです。