怎么在contenteditable可编辑的div插入图片

我在网上搜了一下，然后再根据我自己的改了一下，在此记录。

我的可编辑div

  <div class="send_content" contenteditable="true" id="send_content"></div>

我的上传按钮

这里我的上传按钮改变了样式，变成了小图标，待会我也要记录怎么把上传按钮改变样式

  <span class="file"><iclass="fa fa-picture-o fa-lg" aria-hidden="true"></i><input type="file" name="" onchange="showPreview(this)"></span>

我的div文本样式以及图片的样式

.send_content {width: 660px;height: 130px;margin: 40px auto;overflow: hidden;outline: none;box-sizing: border-box;font-size: 14px;-webkit-background-clip: text;background-image: linear-gradient(to right, #778899 0%, #333 100%);/*粗细 风格 颜色*/
}
.send_content img{max-width: 120px;display: block;
}

脚本代码

function showPreview(source) {var file = source.files[0];if (window.FileReader) {var fr = new FileReader();console.log(fr);var send_content = document.getElementById('send_content');fr.onloadend = function (e) {send_content.src = e.target.result;send_content.focus();document.execCommand('InsertImage', false, send_content.src );};fr.readAsDataURL(file);}
}

最后结果

先点击那个图片按钮，然后选择图片，就可以在我下面的可编辑的div显示。

怎么在contenteditable可编辑的div插入图片相关推荐

html的div插入图片,html插入图片示例(html添加图片)
原标题:html插入图片示例(html添加图片) 在html插入图片让图片显示需要HTML标签来实现,使用img标签即可实现. 一.html图片标签语法复制代码代码如下: img介绍: src ...
java word添加图片_JAVA编辑WORD文件插入图片
展开全部试试这个代码62616964757a686964616fe59b9ee7ad9431333431353936,需要添加spire.doc jar依赖import com.spire.doc. ...
关于可编辑div插入表情图标
在最近的开发中因为项目需要一个可编辑插入表情的编辑框,起初也是头大煎熬,总是被我熬出来了. 在可编辑框中为难我们的是光标定位和在光标的位置插入指定的内容和表情下面开始正事节点内容是这样的我用的是v ...
html5 contenteditable 可编辑属性
今天在工作中遇到了这样的需求.如上gif显示. 于是就仔细的看下了 h5新增的这个可编辑属性 contenteditable contenteditable 属性规定是否可编辑元素的内容.conten ...
editActionsForRowAtIndexPath(iOS8) tableview编辑(删除、插入、移动)
ios8 出来的左滑小菜单可以自定义想要的按钮 (要求ios8以上) - (nullable NSArray<UITableViewRowAction *> *)tableView:(U ...
TexStudio 编辑 Latex 时插入算法伪代码描述块一直报错：Missing \endcsname inserted. \While
问题描述使用 TexStudio 编辑 latex 时插入算法伪代码描述块一直报错:Missing \endcsname inserted. \While,如下图: 原因分析谷歌了很多资料,该删的 ...
Excel插入图片自动OCR识别成可编辑的文字
今天要和大家分享的是:Excel插入图片自动OCR识别成可编辑的文字详见下图动态演示和步骤分解." 1.首先打开Excel表格 2.然后选择diy工具箱 3.选择文字识别按钮 4 ...
java写入pdf文件图片_Java编辑PDF写入文字插入图片
package com.test; import com.itextpdf.text.BaseColor; import com.itextpdf.text.Font; import com.itex ...
HTML5网页设计阶梯教程（2）——插入图片与文字编辑
接着上一章讲,这章我要说说如何改变文字的大小与粗细及如何插入图片. 首先先看看一个标准的HTML5开头与结尾: 之后,我们在head中插入body: 然后插入标准大小的文本: 如果要将文本加粗的话,可 ...
（十一）在线编辑模块（FreeTextBox插入图片，内容保存到数据库）
首先去下载freetextbox,在网站中,选择添加引用,找到freetextbox文件的存放位置,单击确定,系统创建bin,将treetextbox组件存放在bin下.创建一个saveimages的 ...

怎么在contenteditable可编辑的div插入图片

怎么在contenteditable可编辑的div插入图片相关推荐

最新文章

热门文章