可编辑DIV在输入jQuery上不复制图像(或其代码)

Question

我正在为我的网站创建一个表情杂志，但是我在将可编辑的div数据传递给输入中以稍后以形式进行验证时遇到问题。

问题是表情符号粘贴在div中，而不是在input中粘贴，因为我使用的是keyUp，并且代码无法识别糊状，因此我无法保存它们(或它们的文本代码(在我的数据库中。

例如，如果用户写入： " Hi everyone --1--, how is everythin going"我希望在 input中像这样重复，以便一旦从数据库中检索到它，则--1--将用快乐的FAC映像替换。但是，当用户写帖子时，--1--代码在div中显示为最佳用户体验的快乐面孔。

我有这个小提琴，但无法正常工作

https://jsfiddle.net/r5o2zv7x/15/

https://jsfiddle.net/b6c7mz42/29/

$(".emoticon").click(function(){
    var div_val = jQuery.trim($("#myPost").html());
    var emoticon_val = $(this).attr("value");
    
    
    if(emoticon_val=="--1--"){emoticon_vale="<img src='https://www.tes.com/sites/default/files/styles/news_article_hero/public/news_article_images/emoji.jpg?itok=kew_ndmU' height=18 />";}
    
    if(emoticon_val=="--2--"){emoticon_vale="<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtesx1eLvxrO27WYYBvmUKpJufAjyw-9bKIhSH0_C5ntqmLSh'  height=18 />";}
  //show in div
    $("#myPost").focus().html(div_val + '&nbsp;' + emoticon_vale + '&nbsp;');
     $('#copytoInput').val( $('#copytoInput').val() + emoticon_val);
  });
                               
$('#myPost').bind("DOMSubtreeModified",function(){
             $('#copytoInput').val($(this).text());
                                    });

#myPost{
margin:10px 0;
  height:40px;
  width:200px;
  border:1px solid red;
}
#copytoInput{
margin:10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='emoji_picker'>
  <input type=image value='--1--' src='https://www.tes.com/sites/default/files/styles/news_article_hero/public/news_article_images/emoji.jpg?itok=kew_ndmU' height=18 class=emoticon />
  <input type=image value='--2--' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtesx1eLvxrO27WYYBvmUKpJufAjyw-9bKIhSH0_C5ntqmLSh' height=18 class=emoticon />
</div>
  <div contentEditable="true" id='myPost'></div>
                  <input  type=text id=copytoInput >

Answer 1

如果用户写道："大家好-1-- 希望在输入中重复它

根据上述语句，此片段副本将DIV的价值副本授予更改的输入。表情符号的价值将如您说的那样进行编码。如果您没有回答，请让我知道

$(".emoticon").click(function(){
    var div_val = jQuery.trim($("#myPost").html());
    var emoticon_val = $(this).val();
   
  //show in div
    $("#myPost").focus().html(div_val + '&nbsp;<img src=' + $(this).attr('src') + '>&nbsp;');
                               });
$('#myPost').bind("DOMSubtreeModified",function(){
var txt=$(this).html();
var chil=$(this).children();
txt=txt.replace('<img src="http://smashersblog.com/wp-content/uploads/2015/02/img-thing-300x300.jpg">','--3--');
txt=txt.replace('<img src="http://bsmedia.business-standard.com/_media/bs/img/article/2015-11/17/full/1447765386-257.jpg">','--2--');
txt=txt.replace('<img src="https://i.pinimg.com/736x/e2/30/c7/e230c7981926661d73caabc0d4fd6fd3--emoji-faces-smiley-faces.jpg">','--1--');
             $('#copytoInput').val(txt);
                                    });

input[type=image],img{
height:20px;
width:20px;
}
div{
height:50px;
width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='emoji_picker'>
  <input type=image value='--1--' src='https://i.pinimg.com/736x/e2/30/c7/e230c7981926661d73caabc0d4fd6fd3--emoji-faces-smiley-faces.jpg' class=emoticon />
  <input type=image value='--2--' src='http://bsmedia.business-standard.com/_media/bs/img/article/2015-11/17/full/1447765386-257.jpg' class=emoticon />
  <input type=image value='--3--' src='http://smashersblog.com/wp-content/uploads/2015/02/img-thing-300x300.jpg' class=emoticon />
</div>
  <div contentEditable="true" id='myPost'></div>
                  <input  type=text id=copytoInput >

新：

$(".emoticon").click(function(){
    var div_val = jQuery.trim($("#myPost").html());
    var emoticon_val = $(this).attr("value");
    
    
    if(emoticon_val=="--1--"){emoticon_vale="<img src='https://www.tes.com/sites/default/files/styles/news_article_hero/public/news_article_images/emoji.jpg?itok=kew_ndmU' height=18 />";}
    
    if(emoticon_val=="--2--"){emoticon_vale="<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtesx1eLvxrO27WYYBvmUKpJufAjyw-9bKIhSH0_C5ntqmLSh'  height=18 />";}
  //show in div
    $("#myPost").focus().html(div_val + '&nbsp;' + emoticon_vale + '&nbsp;');
  $('#copytoInput').val( $('#copytoInput').val() + emoticon_val);
  });
                               
$('#myPost').on('change keyup',function(){
             var i=$('#copytoInput').val();
             
                  $('#copytoInput').val( $(this).text()+i);
                  
                               console.log($(this).text())     });

#myPost{
margin:10px 0;
  height:40px;
  width:200px;
  border:1px solid red;
}
#copytoInput{
margin:10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='emoji_picker'>
  <input type=image value='--1--' src='https://www.tes.com/sites/default/files/styles/news_article_hero/public/news_article_images/emoji.jpg?itok=kew_ndmU' height=18 class=emoticon />
  <input type=image value='--2--' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtesx1eLvxrO27WYYBvmUKpJufAjyw-9bKIhSH0_C5ntqmLSh' height=18 class=emoticon />
</div>
  <div contentEditable="true" id='myPost'></div>
                  <input  type=text id=copytoInput >