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

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 添加图片和文字后的内容

   <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。我的最终数据应该是这样的：Hello Users

Answer 1

为演示转换添加这个小片段。它用 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>

Answer 2

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

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

Fiddle Demo

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

Get alt attribute of images inside a Contenteditable div and replace the image

html

javascript

unicode

jquery

contenteditable