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

最新推荐文章于 2025-07-03 21:14:27 发布

原创最新推荐文章于 2025-07-03 21:14:27 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

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

记录小技术专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种实现可编辑DIV的方法，同时展示了如何通过更改上传按钮样式为小图标来提升用户体验。文中详细解释了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);
    }
}