contenteditable可编辑div插入图片

最新推荐文章于 2024-10-08 09:54:42 发布
最新推荐文章于 2024-10-08 09:54:42 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： js 文章标签： 富文本 contenteditable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bocongbo/article/details/84061110
版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本上传图片</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">
        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

不求甚解bc
关注
专栏目录
在可编辑div中插入文字或图片（三）
HiterCoder
04-25 1823
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
有趣的contentEditable属性，实现div可编辑
土匪丁的博客
04-06 2323
当需求需要在文本输入中加入一些样式，并按删除键遇到某些样式的为多个文字整体删除，使用textArea是无法实现的，textArea中没有办法写单独样式，或者加入其他标签和组件。这时候就需要使用到contentEditable属性，将div或者一些其他标签可编辑。 这样便可以简单实现一个可编辑的div，需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除，但是此时控制地台会报一个警告，如下图 需要加上suppressContentEditabl
在可编辑div中插入文字或图片（一）
HiterCoder
04-25 7983
&lt;div id="editer" contenteditable="true" style="border: 1px solid #ccc; width: 400px; height: 200px"&gt; 123456123456 &lt;/div&gt; &lt;button onclick="InsertImage()"&
聊天框 contenteditable 上传图片及贴图
北寻北爱
07-08 1441
使用contenteditable属性实现输入框；输入框功能包括：Enter发送；粘贴文本及粘贴图片；上传图片插入输入框
HTML 技巧
liuxiaoqi_123的博客
10-08 1087
HTML 技巧
关于 contentEditable 可编辑DIV 实现在光标处插入自定义图片【已解决，可直接使用】
XH_jing的博客
01-22 1522
可编辑DIV也就是常说的富文本编辑器。当我们自己实现一个富文本编辑器时，需要设置div的可编辑属性 `contenteditable="true"`
怎么在contenteditable可编辑的div插入图片
fenger_c的博客
04-12 3006
我在网上搜了一下，然后再根据我自己的改了一下，在此记录。 我的可编辑div <div class="send_content" contenteditable="true" id="send_content"></div> 我的上传按钮 这里我的上传按钮改变了样式，变成了小图标，待会我也要记录怎么把上传按钮改变样式 <span class="f...
vue div设置为contenteditable，通过鼠标光标位置插入图片
grand_brol的博客
08-22 1190
3、将图片生成好dom并赋值。parseDom方法。
vue使用contenteditable 实现光标处插入自定义图片
JasonAlonk的博客
12-31 2395
vue使用contenteditable 实现光标处插入自定义图片 前几天接到一个需求，要自定义编辑短信模板但是里面有 姓名，日期这样的标签，为了用起来方便于是决定让用户自己选中插入，类似富文本插入图片那样，好了废话不多说，展示。 <template> <div class="content-padding"> <div class="shortMessage-tag"> <!-- 插入图片的标签 --> <img @
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。 基本上编辑...
关于可编辑div插入表情图标
li336699li的博客
11-12 1356
在最近的开发中因为项目需要一个可编辑插入表情的编辑框，起初也是头大煎熬，总是被我熬出来了。 在可编辑框中为难我们的是光标定位和在光标的位置插入指定的内容和表情 下面开始正事 节点内容是这样的我用的是vue作为前端 <div :contenteditable="true" ></div> 要在指定的位置插入内容...
contenteditableInput：可以插入表情的输入框（微信交替表情）
02-05
contenteditableInput：可以插入表情的输入框（微信交替表情）
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
09-28
以往我们想要实现可编辑的文本区域，通常会使用textarea元素，但在某些场景下，使用div配合contenteditable属性或许会更加灵活和强大。 属性的使用非常简单，只需要在HTML元素上添加contenteditable="true"，这个...
contenteditable=“true“ 富文本编辑器小插图
qq_40774743的博客
11-25 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>contenteditable</title> <style> *{ margin:0; padding:0; }
设置contenteditable属性可编辑HTML标签的内容(可代替textarea) 插入图片
dichou0407的博客
05-25 286
设置contenteditable属性可编辑HTML标签的内容(可代替textarea) <script>function img(){var location1 = prompt("请输入图片的地址：","http://");if(location1){selImg(location1);}}function selImg(s){if(!s){return fals...
contenteditable——html5新增的一个允许用户直接在页面中编辑文本内容的属性
AmyGeng123的博客
06-27 1609
contenteditable，html5新增的一个允许用户直接在页面中编辑文本内容的属性，以及contenteditable与input标签的比较
contenteditable 里面的 img 设置display为block
Ervoconite 的博客
09-14 106
contenteditable 里面的 img 设置display为block，就能让img和文本p一样编辑了！
解决mysql插入中文出现错误Incorrect string value: '\xE7\xA8\x8B\xE5\xBA\x8F...' for column 'course' at row 1
热门推荐
qq_27632921的博客
11-13 4万+
一：在windows中打开命令行，切换到mysql的bin目录下，登陆数据库，然后把数据库切换到自己的数据库中 二：使用show create table 加上你自己的表明查看数据表的编码是什么，如果是下图所示则需要修改玮utf-8的编码格式。 具体命令如下：alter table tableName(你自己的表名) default character set utf8; 修改成功后...
用 contenteditable 实现插入图片
最新发布
10-13
在HTML中，`contenteditable`属性允许元素的内容被用户直接编辑。然而，由于其设计初衷主要是文本输入，原生情况下并不支持直接插入图片。要实现这个功能，通常需要借助JavaScript来扩展编辑区域的功能。 以下是一个简单的示例，利用JavaScript的`insertAdjacentHTML()`方法和`FileReader` API来实现： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .editable-image { border: 1px solid black; padding: 10px; resize: none; } </style> </head> <body> <div contenteditable="true" class="editable-image" id="myEditableArea"></div> <!-- 插入图片按钮 --> <button onclick="insertImage()">Insert Image</button> <script> function insertImage() { document.getElementById('myEditableArea').addEventListener('paste', handlePaste); // 当用户粘贴时触发 function handlePaste(e) { e.preventDefault(); // 阻止浏览器默认行为（防止覆盖已存在的图片） var files = (e.clipboardData || window.clipboardData).items; if (!files || !files.length) return; var file = files[0].getAsFile(); if (!file) return; var reader = new FileReader(); reader.onload = function (event) { var imgHTML = `<img src="${event.target.result}" alt="Uploaded image">`; document.execCommand('insertHTML', false, imgHTML); // 插入HTML }; reader.readAsDataURL(file); } } </script> </body> </html> ``` 在这个例子中，当点击“Insert Image”按钮后，会监听`paste`事件。如果用户从剪贴板粘贴图片，它会被读取并转换为Base64格式的URL，然后插入到可编辑区域中。 请注意，这只是一个基本的示例，实际应用可能需要考虑更多情况，如错误处理、用户选择文件的方式（可能是通过文件选择器而非粘贴）、以及兼容性问题等。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值