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

Question

我已经实现了小型网络聊天应用程序，并在其中使用了smileys。

我制作了div contenteditable="plaintext-only"，并将文本和微笑的图像添加到该div中。

每当用户单击笑脸时，image with unicode character as alt将绑定到可内容的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的内容

   <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
}

我的问题是：

我需要得到数据和循环遍历每一个元素，并用独角兽替换所有图像。我的最终数据应该是:你好用户。

Answer 1

您可以在children()上迭代，并使用replaceWith()替换img的alt属性。

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

小提琴演示

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>

​