话不多说，直接出解决方案【复制代码可直接使用】
可编辑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}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！