表情符号，带有原始图标的文本区域和带有替换图标的文本字段

Question

我有一个可编辑的 div，它应该在输入时替换表情键。还有一个隐藏的文本区域，应该有原始数据，但我不知道这应该如何工作。我用这个 library.
我的 jquery 代码：

         $('#acompose_message').keyup(function() {
                val = $('#acompose_message').html();
                document.getElementById('compose_message').innerHTML = val;
                emotifyVal = emotify(val);
                $('#acompose_message').html(emotifyVal);

        });

'#acompose_message'是可编辑的div和'#compose_message'是隐藏的div

Answer 1

看来你是js新手。但这不是我们的问题。你想建立一个带有表情符号的聊天系统。也不是问题。您只需要重新考虑您的方法。

在那个阶段不要使用图像表情符号，而是使用现成的html 表情符号。看看这里 Emoticons HTMl。它们是现成的表情符号，可以像文本一样配置。您可以复制粘贴并完成您使用字母所做的所有其他工作人员。如果您看到每个表情符号都有一个值（例如＆#128512;）（现在试试..复制并粘贴表情符号。哦，这是一个..😀）您还可以指定颜色，字体大小等css 中的值就像字母一样（我有提到吗？;）
现在是脚本部分。使用 Ready-Html 表情符号，您需要重新考虑 JavaScript 的方法。你为什么不先制作一个 select 框来 select 你的表情符号而不是转换文本？查看 Google-环聊和 Facebook 或 Skype。他们有一个面部按钮，可以向您显示面部。从那时起，您需要做的就是单击您喜欢的图像（在您的情况下为 Ready_Html 表情符号），并将放置在您的文本输入中。然后您可以处理 on-enter 事件以将消息发送到其他客户端。

总结一下。像这样使用 Ready HTML 表情符号：

<div style="color: red; font-size: 18px; font-family: sans-serif;">&#128512; </div>

用户可以 select 来自弹出按钮的表情符号：这是一个图像示例：

这是一个典型的 js 代码：

对于表情按钮：

$('#emonicons').click(function() {
        if (emojis_isShown) {
            $('.spawn-emonicons').fadeOut(300);
            emojis_isShown = false;
        }
        else {
            $('.spawn-emonicons').fadeIn(300);
            emojis_isShown = true;
        }

});

对于实际图标：

$('.ico').click(function() {
        var value = $(this).text();
        var input = $('#message-sender');
        input.val(input.val() + value + ' ');

});

在第二个代码中，当用户按下他想要的图标时，图标将转移到 ID 为 message-sender 的输入文本中。现在要处理按键 enter ，这将发送您的消息，您可以在 JS 中使用以下伪函数。

 $('#message-sender').bind('keydown', function (event) {
         if(event.which === 13) {
            emojis_isShown = false;
            $('.spawn-emonicons').hide();
            var msg = $(this).val();
            var newdiv1 = '<div class="whatever">'+msg+'</div>'

               $( newdiv1 ).insertAfter( $( ".message" ).last());

         }
 });

上面的代码读取所有按键，当按下键 13（回车）时隐藏表情符号 window。使用您键入的消息创建一个新的 div 并将其发送到前端。您还应该考虑使用 Ajax 将消息发送到 'other side' （操作，我的意思是客户端）。

如果不能为您提供更多帮助，我深表歉意。聊天框系统是一项教学任务，不推荐给新程序员（谁说的？？？）

我最后想给你的是我在 dreamincode.com 上找到的关于构建简单聊天框的教程。从那开始。随着时间的推移，当你成为更好的程序员时，你会找到你寻求的解决方案！

教程（一个非常好的教程）： Simple Text Chat Box

Answer 2

现在我几乎解决了我的问题：

var emotifyText = function(e) {
            var caretPosition = getCaretPosition(this);
            var images = [];
            var i = 0;
            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#acompose_message').html(emotifyVal);
            $.each($('#acompose_message img'), function(index){
                console.log(i);
                $(this).replaceWith(function(){
                    return jQuery.inArray( $(this).attr('src'), jsonIcons );
                });
                i++;
            });

            val = $('#acompose_message').html();
            var emotifyVal = emotify(val);
            $('#compose_message').val(val);
            $('#acompose_message').html(emotify(val));
    };

但是带有 $(this).replaceWith(function(){ 的行不起作用，现在我的问题是，有人知道如何用其他字符串替换 div 中的每个 img 吗？

表情符号，带有原始图标的文本区域和带有替换图标的文本字段

emoticon, textarea with raw and textfield with replaced icon

javascript

jquery

html

emoticons