欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

contenteditable可编辑div插入图片

程序员文章站 2023-12-23 12:54:46
...

可编辑div也就是常说的富文本编辑器，自己手动做一个富文本编辑器。需要设置div的可编辑属性contenteditable="true"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本上传图片</title>
    <style>
        #editer{
            border: 1px solid #ccc; 
            width: 400px;
            height: 200px;
            margin-bottom: 30px;
        }
        #editer img{
            /* 需要图片换行的话，可以设置display:block; */
            display: block;
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div id="editer" contenteditable="true">
        123456123456
    </div>
    <input type="file" name="file" id="uploadFile" onchange="uploadFile(event)"/>    
</body>
<script type="text/javascript" language="javascript">
    var editer = document.getElementById('editer');
    function uploadFile(e){
        let file = e.target.files[0]; //需要上传到后台的图片
        //上传后台，此处省略。。。。。。。。。。。
        let filePath = 'http://qiniu.jnwtv.com/LC20180417174434604455636.jpg';
        //filePath为后台返回的图片地址
        editer.focus();
        document.execCommand('InsertImage', false, filePath);
    }
</script>
</html>

更多富文本操作请参考官方文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

相关标签： 富文本 contenteditable

上一篇：

下一篇：

推荐阅读