之前做了一个可编辑div需要在里面插入内容，搜了好多代码，就这个能实现我的功能，记录一下，以备以后用

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>UMEDITOR 简单功能</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="../third-party/jquery.min.js"></script>

</head>

<body>

    <h1>UMEDITOR 简单功能</h1>

	<script type="text/javascript">

		$(function(){

			$("#myEditor").focus(function(){

		    	$("#myEditor").removeClass("flag");

		    });

		    /* $("#myEditor").blur(function(){

		    	$("#myEditor").addClass("flag");

		     }); */

		});

   		function add(){

   		 insertHTML("<input type='text' disabled />");

   		}

   		 //再加入一个全屏事件

   		     $(window).click(function(e)

   		          {

   		            if (window.getSelection)

   		            {

   		                 var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思

   		              //console.log(getevent.id,getevent.tagName);

   		                if(getevent.id!=null && getevent.id=="cmdInsert"||getevent.id=="myEditor")

   		                {

   		                	//alert(0);

   		                	//代表 点了插入html的按钮

   		                    //则不执行getFocus方法

   		                 }

   		                else

   		                	$("#myEditor").addClass("flag");//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div

   		            }  

   		          }) 

   		function insertHTML(html)

        {

            var dthis=$("#myEditor")[0];//要插入内容的某个div,在标准浏览器中 无需这句话

            //dthis.focus();

             var sel, range;

             console.log($(dthis).hasClass("flag"));

             if($(dthis).hasClass("flag")){

            	 $(dthis).html(dthis.innerHTML+html);

            	 return;

             }

             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();      

             }

        }

	</script>

	<button onclick="add()" id="cmdInsert" style="border: none;background-color: #fff;">增加节点</button>

    <div id="myEditor" class="flag" style="position:absolute;width:800px;height:240px;border:1px;border-color: red;background-color: #f5f5f5" contenteditable="true">

    </div>

</body>

</html>

2017-02-20 可编辑div中如何在光标位置添加内容的更多相关文章

  1. js之向div contenteditable光标位置添加字符

    js之向div contenteditable光标位置添加字符  原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...

  2. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  3. C#-WinForm-如何获取文本框（TextBox）中鼠标，光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

  4. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  5. (转)jquery easyui treegrid使用小结 （主要讲的是如何编辑easyui中的行信息包括添加 下拉列表等）

    在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列 ...

  6. sql语句（已在Oracle中测试，之后有添加内容放在评论中）

    1增 1.1[创建一张表] create table 表名(列名 类型); 例: ),性别 ),出生日期 date); ),sex ),出生日期 date); 1.2[插入单行]insert [int ...

  7. chrome、firefox、IE中input输入光标位置错位解决方案

    以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...

  8. 可编辑DIV与移动端软键盘兼容性问题汇总

    此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...

  9. 【转】怎么给javascript + div编辑框光标位置插入表情文字等？

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

随机推荐

  1. pc端监听屏幕实现导航固定定位

    要点:占位符 js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离 大于 要固定定位开始以下元素的距离,则给要固定元素添加fixed样式. 初始化方法时,要给占位符添加样式 function sort ...

  2. js四则运算符

    只有当加法运算时,其中一方是字符串类型,就会把另一个也转为字符串类型.其他运算只要其中一方是数字,那么另一方就转为数字.并且加法运算会触发三种类型转换:将值转换为原始值,转换为数字,转换为字符串. & ...

  3. Linux中的判断式

    格式一:test [参数] 判断内容格式二:[ [参数] 判断内容 ] 说明: a.格式二可以认为是格式一的缩写 b.格式二里中括号和内容之间要有空格 基于文件的判断-d 判断文件是否存在,并且是目录 ...

  4. 001-maven下载jar后缀为lastUpdated问题

    问题简述 Maven在下载仓库中找不到相应资源时,网络中断等,会生成一个.lastUpdated为后缀的文件.如果这个文件存在,那么即使换一个有资源的仓库后,Maven依然不会去下载新资源. 解决方案 ...

  5. 【WEB HTTP】缓存

    1. HTTP并不支持兄弟缓存,所以人们通过一些协议对HTTP进行了扩展,比如因特网缓存协议(Internet Cache Protocol, ICP)和超文本缓存协议(HyperText Cachi ...

  6. 在GCE上安装Apache、tomcat等

    1.安装Apache2.2.3 (虚机的操作系统是CentOS7) sudo yum install wget -y cd /opt sudo wget http://archive.apache.o ...

  7. Linux基础系列：常用命令（1）

    1.开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语 2.使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 命令:ctrl+alt+F2 3.使用命 ...

  8. Incomplete response received from application

    RAILS_ENV=production rake secret 将输出的一大串字码粘贴到rails工程中/config/secrets.yml去,替换掉该文件中的<%= ENV["S ...

  9. Python操作SQLAlchemy

    Mysql环境: MySQL 一.概述什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 什么是 MySQL.Oracle.SQLite.Access.MS ...

  10. springboot-数据库

    Spring-data-jpa jpa定义了一系列持久化的标准,比如hibernate就实现了这一标准. Springboot 的jpa就是hibernate的整合. 在pom文件中增加配置: < ...