在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。
基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。
我这里用的是 div.
要使div可编辑 必须 加入 contentEditable="true" 这个属性。
然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。
由于火狐等标准浏览器支持getSelection方法,IE9以上也支持,但是万恶的iE6-8不支持,因此要分两部分代码来写。由于这些代码很简单,以下先贴一遍
function insertHTML(html) { var dthis=$("#div3")[0];//要插入内容的某个div,在标准浏览器中 无需这句话 var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement('div'); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type !='Control') { $(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点 ierange= document.selection.createRange();//获取光标位置 ierange.pasteHTML(html); //在光标位置插入html 如果只是插入text 则就是fus.text="..." $(dthis).focus(); } }
以上代码基本 完成了 在可编辑div中 插入指定的html内容,这些代码在baidu或者google中到处可以搜到,因此不再解释为什么这么写(太普遍了)
执行后 会发现在IE或者非标准浏览器中 是正常的。在火狐或者chrome中 就不正常了
譬如 以下页面 ,我有 不定数量的div(可能是程序动态生成),我只需要其中某一个div进行html的插入,其他不需要。
.....其他html元素.....
<div id="div1" contentEditable="true" ></div> <div id="div2" contentEditable="true" ></div> <div contentEditable="true" id="div3"></div> <input type="button" id="cmdInsert" οnclick="执行向div3插入html方法"/>
如上页面 我只需要div3 支持插入html 其他两个 只是可编辑而已
- 使用上述代码会发现,如果最后一个失去焦点的是 div3 那么一切正常 如果 不是div3 或者 我又点到页面其他控件或者空白处,会发现插入的html没有插入到我们想要的div3中而是插入到了 其他地方。
- 这其实不是bug,而是正常现象,getSelection 可以横跨很多域,因此无法保证 获得出来的range一定是你需要的div
这里我再次申明,我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。
其实我们要解决的就是一件事情,每当页面上的元素(包括div或者任意元素) 获得焦点又失去后,我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码,如果不是直接在div3的内容后面加入要插入的html(硬编码就可以。不要告诉我 不会)
一开始我想到的办法是对div3设置一个click事件以及focus事件,当鼠标点进去或者获得焦点时 把一个变量 譬如叫做 isdiv3 设置为true,点其他地方设置为false(这个方法实际上是行不通的,这里我就不多解释为什么行不通,有各种不同的情形可以导致即使获 得焦点,isdiv3依然不会被设置为true,而且需要对每个html元素设置事件让isdiv3变为false,这是很恐怖的事情)
这里我放出一种比较通用和不容易被干扰的解决办法。
首先在 页面的 最顶部写上
<style>
div:focus{z-index:100;} // 这里随意你设置多少值,100只是举个列子<br>
</style>
上面这个样式告诉我们,当只有div 获得焦点后 他会产生一个css属性就是 z-index被设置成了100,以任何形式失 去焦点 这个css属性就没了。当然你也可以设置其他的css属性。因为我们在点button执行函数的时候,div3也会失去焦点 (getSelection 依然存在)
以下思路就清晰了 我们再写一个函数
var lastFocusID="";
function getFocus() { var divlist = document.getElementsByTagName('div'); for(var i=0; i<divlist.length; i++) { var ta = divlist.item(i); if (window.getComputedStyle(ta, null).zIndex!=null && window.getComputedStyle(ta, null).zIndex == 100) { if(ta.id && ta.id!=null) lastFocusID=ta.id.toString(); else lastFocusID=""; break; } else lastFocusID=""; } } //再加入一个全屏事件 $(window).click(function(e) { if (window.getSelection) { var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思 if(getevent.tagName=="INPUT" && getevent.id!=null && getevent.id=="cmdInsert") { //代表 点了插入html的按钮 //则不执行getFocus方法 } else getFocus();//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div } })
然后修改一下 insertHTML 这个方法 function insertHTML(html) { var dthis=$("#div3")[0]; var sel, range; if (window.getSelection) { if(lastFocusID!="div3") { $("#div3).html(dthis.innerHTML+html) ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则 return;//后面不执行了<br> } 。。。。。。。。。。//其他代码照旧
这样就解决火狐或者chrome里面 会出现乱插入内容的现象。
当然这只是一个思路, 欢迎大家提供更好的办法和性能更高的思路。
在可编辑div中插入文字或图片的问题解决思路相关推荐
- 在div中插入文字和改变背景色
如下图,通过点击按钮,在div盒子中插入文字,并背景色 1.可以使用div中的innerText属性在div中插入文本内容,style.backgroudColor属性设置背景色. 2.完整 ...
- Word2003入门动画教程36:在Word文档中插入文字
Word 2003是微软公司提供的一款文字处理软件,可以对文字进行 排版 和编辑.分段等各种处理,最终将编辑好的内容打印出来,是办公室一族中必备的办公软件之一.这里Word联盟就为大家分享如何在Wor ...
- 实现全屏轮播,并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <htmllang="en"> &l ...
- 在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html><head lang="zh"><meta ht ...
- 怎么在CAD编辑软件中设置文字样式
在CAD中,一般绘制图纸的时候都需要将图纸的文字样式进行设置.那么,怎么在CAD编辑软件中设置文字样式呢?具体要怎么来进行操作呢?相信很多的小伙伴们都想要知道,那下面小编本编教程就来教教大家具体的操作 ...
- mfc中插入PNG透明图片
mfc中插入PNG透明图片 记录下在mfc中插入png透明图片的方法 新建项目 在对话框界面中插入两个 Picture Control 在MFC_pngDlg.h中添加 在MFC_pngDlg.cpp ...
- python 网页中插入自己的图片
** python 网页中插入自己的图片 ** 初学python根据这个教程做出来了博客的界面https://blog.csdn.net/u014793102/article/details/8037 ...
- Python 获得pdf中的文字、图片文字方法
Python 获得pdf中的文字.图片文字方法 下载word版文件 OCR,全称Optical character recognition,中文译名叫做光学文字识别.它把图像中的字符,转换为机器编码的 ...
- Html中加入文字和图片
TextView控件中的html语句中添加文字和图片 1.创建添加png/jpg必要的类 public class ImageGetterUtils {public static MyImageGet ...
最新文章
- 走进科学-小菌株大作为—枯草芽孢杆菌替代畜牧业抗生素添加
- OCR文字识别软件的快速任务功能如何用
- 电机PID实验--一文让你看透PID​
- layui列表显示缩略图_layUI实现列表查询功能
- print python 如何加锁_深度解密Python单例模式
- 10行代码AC——7-2 说反话-加强版 (20 分)——解题报告
- SAP Fiori RouteMatched and getById
- 带有Spring Cloud Config和JHipster的Java微服务
- mongodb lbs java_LBS JAVA Spring mongoDB
- telnet后为啥打开的时防火墙_《和平精英》停服时玩家打开国际服,淘汰1个敌人后收到1个提示!...
- js 控制文件名与文件大小
- 虚幻引擎4.3发布:支持 iOS 8 的 Metal 图形 API
- 宝塔面板不能备份数据库,数据库备份大小20K,数据库备份报错mysqldump: Got error: 1045: Access denied for user 'root'@'localhost'
- 总时差与自由时差的计算
- CSDN日报20170224——《程序员该用哪种姿势来理财》
- LwIP+ STM32+HTTP例程参考
- CSGO 绑定一键跳投
- 我的2011--虚荣、挣扎、总结和转变的一年
- 在数组中 找左边都比其小右边都比其大的元素
- 简单说下HTTP代理、HTTPS代理、SOCKS代理的原理区别,charles抓包HTTPS原理
热门文章
- 使用mkfs.ext4格式化大容量磁盘
- FZU 1889 龟兔赛跑
- CSS的四种引入方式
- win10 安装字体且不占用系统盘资源
- 通讯录_怎么恢复手机通讯录?最完整手机通讯录恢复方法大公开
- servlet返回数据_JavaEE の Servlet - Http/Servlet - Day14 - 190507
- python奥运五环_python如何画奥运五环
- 池州市计算机专科,2021年3月安徽省池州市计算机等级考试时间
- java 图像膨胀与腐蚀程序_膨胀和腐蚀 - 解决图像缺陷问题
- 存储过程结果更改编码_Docker安装Minio存储服务器详解