怎么在contenteditable可编辑的div插入图片

我在网上搜了一下，然后再根据我自己的改了一下，在此记录。

• 我的可编辑div

  <div class="send_content" contenteditable="true" id="send_content"></div>

• 我的上传按钮

这里我的上传按钮改变了样式，变成了小图标，待会我也要记录怎么把上传按钮改变样式 

  <span class="file"><i
                        class="fa fa-picture-o fa-lg" aria-hidden="true"></i>
                    <input type="file" name="" onchange="showPreview(this)">
                </span>

 

• 我的div文本样式以及图片的样式

.send_content {
    width: 660px;
    height: 130px;
    margin: 40px auto;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    font-size: 14px;
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, #778899 0%, #333 100%);
    /*粗细 风格 颜色*/
}
.send_content img{
    max-width: 120px;
    display: block;
}

• 脚本代码

function showPreview(source) {
    var file = source.files[0];
    if (window.FileReader) {
        var fr = new FileReader();
        console.log(fr);
        var send_content = document.getElementById('send_content');
        fr.onloadend = function (e) {
            send_content.src = e.target.result;
            send_content.focus();
            document.execCommand('InsertImage', false, send_content.src );
        };
        fr.readAsDataURL(file);
    }
}

• 最后结果

先点击那个图片按钮，然后选择图片，就可以在我下面的可编辑的div显示。