关于 contentEditable 可编辑DIV 实现在光标处插入自定义图片【已解决，可直接使用】

最新推荐文章于 2024-09-26 10:36:19 发布

八了个戒

最新推荐文章于 2024-09-26 10:36:19 发布

阅读量1.5k

点赞数 22

文章标签： contentEditable 前端大前端 javascript html

本文链接：https://blog.csdn.net/XH_jing/article/details/135703553

版权

话不多说，直接出解决方案【复制代码可直接使用】

可编辑DIV也就是常说的富文本编辑器。当我们自己实现一个富文本编辑器时，需要设置div的可编辑属性 contenteditable="true"

解决方案

方案一、使用基础特性 `document.execCommand`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contentEditable上传图片</title>
    <style>
        #editor{
            border: 1px solid #ccc; 
            width: 400px;
            height: 200px;
            margin-bottom: 30px;
        }
        #editor img{
            /* 需要图片换行的话，可以设置display:block; */
            display: block;
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div id="editor" contenteditable="true">
        0123456789
    </div>
    <input type="file" name="file" id="uploadFile" onchange="uploadFile(event)"/>    
</body>
<script type="text/javascript" language="javascript">
    const edited = document.getElementById('editer');
    // 文件上传，模拟方法
    function uploadFile(e){
        const file = e.target.files[0]; // 需要上传到后台的图片
        // 文件上传，此处功能省略，直接使用假数据
        const filePath = 'https://img2.baidu.com/it/u=4259428193,1811830338&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
        // filePath为后台返回的图片地址
        document.execCommand('InsertImage', false, filePath);
    }
</script>
</html>

方案二、使用自定义方法插入【简单改造可实现在前面、后面插入】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contentEditable上传图片</title>
    <style>
        #editor{
            border: 1px solid #ccc; 
            width: 400px;
            height: 200px;
            margin-bottom: 30px;
        }
        #editor img{
            /* 需要图片换行的话，可以设置display:block; */
            display: block;
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div id="editor" contenteditable="true">
        0123456789
    </div>
    <input type="file" name="file" id="uploadFile" onchange="uploadFile(event)"/>    
</body>
<script type="text/javascript" language="javascript">
    const edited = document.getElementById('editer');
    // 文件上传，模拟方法
    function uploadFile(e){
        const file = e.target.files[0]; // 需要上传到后台的图片
        // 文件上传，此处功能省略，直接使用假数据
        const filePath = 'https://img2.baidu.com/it/u=4259428193,1811830338&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500';
        // filePath为后台返回的图片地址
        insertImageAtCursor(filePath)
    }
    // 在光标处插入图片
    const insertImageAtCursor = (url) => {
        const imgNode = document.createElement('img');
        imgNode.src = url;
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        range.insertNode(imgNode);
        range.setStartAfter(imgNode);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    };
</script>
</html>

总结

关于 contentEditable，大家可以认真看一下官方文档哟～

希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～

各位加油！

✨ $\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$