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

Question

我已经实现了小型网络聊天应用程序并在其中使用了笑脸。
我制作了我的 div contenteditable="plaintext-only" 并将文本和笑脸图像添加到该 div。
每当用户点击笑脸时，带有 unicode 字符作为 alt 的图像 将绑定(bind)到 contenteditable div，他还可以在其中键入文本。 因此，最后单击发送按钮后，我需要获取 div 中的全部内容并用 alt 中的 unicode 替换图像 并将纯文本作为文本本身并发送消息。

我的表情绑定(bind)代码:

$("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
}

我的问题是:

我需要获取数据并遍历每个元素并将所有图像替换为 unicode。我的最终数据应该是这样的:👸😸😼 你好用户

Answer 1

您可以遍历 children() 并使用 replaceWith() 将 img 替换为其 alt 属性。

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

Fiddle Demo