Question

我已经实施了小型网络聊天应用，并在其中使用了smileys 我已经制作了我的div contenteditable="plaintext-only"并将文字和笑脸图片添加到该div中每当用户点击表情符号时，image with unicode character as alt将绑定到contenteditable div，他也可以在其中键入文本。所以，最后点击发送按钮后，我需要在div和replace the images with unicodes in the alt中获取整个内容，并将纯文本作为文本本身并发送消息。

我的表情符号绑定代码：

$("span.emo", container).click(function () {
   debugger;
   var toSlice = $(this).attr("data-emoji").split('-'); // get unicode Character
   var preview = emojione.toImage(toSlice[1]); // unicode to image conversion
   $('.mydiv').html($('.mydiv').html() + preview); // append image to the div
});

添加图片和文字后我的内容

   <div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 100px">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4">&nbsp;Hello Users<br>
   </div>

我的发送按钮代码

function Send() {
   debugger;
   //var allimgs = $('.mydiv').find('.emojione');
   var alldata = $('.mydiv').html(); // getting all html data but dont know how to loop through every element
   var childrendata = $(".mydiv").children(); // here I'm not getting the text, only getting the images as array
   var contenteditable = document.querySelector('[contenteditable]'),
                text = contenteditable.textContent; // here also I'm getting only text
}

我的问题是：

我需要获取数据并遍历每个元素并用unicodes替换所有图像。我的最终数据应该是：Hello Users

Answer 1

您可以对children()进行迭代，并使用 replaceWith() 将img替换为alt属性。

function Send() {
    $('.mydiv').children('.emojione').each(function () {
        $(this).replaceWith($(this).prop('alt'))
    });
}

<强> Fiddle Demo

Answer 2

添加此小片段进行演示转换。它用alt标签替换图像，非常直接。

/* Added snippet */
window.transform = function() {
    $('.emojione').each(function () {  // for each emoji
        var unicode = $(this).attr('alt');  // grab attribute 'alt'
        this.outerHTML = unicode;  //  set the images entire html as the alt tag instead
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 50px">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4">&nbsp;Hello Users
</div>
<!-- Added Button -->
<button onclick="transform()">Transform!</button>

在Contenteditable div中获取图像的alt属性并替换图像

2 个答案: