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

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

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

解决方案

方案一、使用基础特性 document.execCommand
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为后台返回的图片地址
        document.execCommand('InsertImage', false, filePath);
    }
</script>
</html>
方案二、使用自定义方法插入【简单改造可实现在前面、后面插入】
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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

相关推荐
Bellafu6661 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构