`

JavaScript Range用来开发类似于百度贴吧和webqq的编辑器

 
阅读更多
 发表于 2010-10-15 17:50:12 |只看该作者 |倒序浏览

Range，这是个很容易被人忽略的东西，在开发富文本编辑器时会经常用到。使用iframe设计模式或div的 contenteditable=“true” 。 

webqq和百度贴吧都没使用iframe制作编辑器，都用了div，是因为iframe设计模式和documen.domain冲突。contenteditable属性现在除了火狐2.0不支持，其他都可以。（使用FF2.0访问百度贴吧和webqq将无法发帖、聊天）。
关键地方时光标位置的保存，光标位置的插入html和表情，小弟研究了几天，有些收获，所以抛砖引玉献丑了。

1首先要getSelection（获取选中文字），IE是有一套自己的办法，所以要判断   -selection= (window.getSelection) ? window.getSelection() : document.selection;
2然后创建Range对象  selection.createRange ? selection.createRange() : selection.getRangeAt(0);     selection在第一步获取

光标位置插入html. IE 很简单  直接 pasteHTML(''),即可，简单方便。 但要注意，点击插入时候编辑器已经失去焦点。（后面会在失去焦点时候保存下range）；
     range.collapse(false);插入后光标位于插入内容的后面

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title></title>

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

  </head>

  <body>

      <div id="div" contenteditable="true" style="width:300px;height:100px;border:1px solid #000"><br /></div>

      <input type="button" value="插入" onclick="test('测试一下')" onfocus="this.blur()" />

      <script type="text/javascript">

          function test(str){

              if(!document.all){

                  alert("仅在IE中可以查看");

                  return;

              }

              document.getElementById('div').focus();

              var selection= window.getSelection ? window.getSelection() : document.selection;

              var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);

              range.pasteHTML(str);

              range.collapse(false);

              range.select();

          }

      </script>

  </body>

</html>      

  提示：您可以先修改部分代码再运行


        firefox/谷歌等支持标准的浏览器在光标位置插入html，稍微麻烦些
                        

 

<html>

    <head>

        <title></title>

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

    </head>

    <body>

        <div id="div" contenteditable="true" style="width:300px;height:100px;border:1px solid #000"><br /></div>

        <input type="button" value="插入" onclick="test('测试一下')" onfocus="this.blur()" />

        <script type="text/javascript">

            function test(str){

                var selection= window.getSelection ? window.getSelection() : document.selection;

                var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);

                if (!window.getSelection){alert("请在支持w3c标准的浏览器查看")}

                else{

                    document.getElementById('div').focus();

                    range.collapse(false);

                    var hasR = range.createContextualFragment(str);

                    var hasR_lastChild = hasR.lastChild;

                    while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {

                        var e = hasR_lastChild;

                        hasR_lastChild = hasR_lastChild.previousSibling;

                        hasR.removeChild(e)

                    }                                

                    range.insertNode(hasR);

                    if (hasR_lastChild) {

                        range.setEndAfter(hasR_lastChild);

                        range.setStartAfter(hasR_lastChild)

                    }

                    selection.removeAllRanges();

                    selection.addRange(range)

                }

        }

        </script>

    </body>

</html>

 

 

 

 提示：您可以先修改部分代码再运行

                   W3C标准的这个也下周再做注释

要下班了，下周继续吧。 会有编辑器要重新定义回车、获取选中的内容以替换、粘贴html图片时候过滤、保存range等。
分享到：
| [javascript]浏览器下文本域光标的定位
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    集团企业数字孪生平台信息化蓝图（应用系统架构、数据架构、IT基础设施与信息安全架构、信息化组织与管控.pptx

    集团企业数字孪生平台信息化蓝图（应用系统架构、数据架构、IT基础设施与信息安全架构、信息化组织与管控.pptx

    基于微信小程序的助农扶贫小程序

    大学生毕业设计、大学生课程设计作业

    node-v6.9.1.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar

    基于matlab开发的多元散射校正和变量标准化Matlab处理程序，可以对建模前的原始数据进行校正、处理.rar

    吉林大学离散数学2笔记 自用.pdf

    吉林大学离散数学2笔记 自用

    MyBatis使用动态SQL的if标签

    mybatis动态sql

    信息办公淘客在线客服管理系统TaokeOCS v3.2 站点版-root.rar

    TaokeOCS v3.2 站点版_root.rar是一个专为淘客设计的在线客服管理系统的JSP源码资料包。这个系统是针对淘宝客服务的一个全面解决方案，它提供了一种高效、便捷的在线客服管理方式。该系统采用JSP技术构建，具有高度的可扩展性和稳定性。通过这个系统，淘客可以方便地管理和跟踪他们的客户，提供实时的在线客服支持。系统的主要功能包括客户信息管理、在线聊天、问题反馈处理、订单管理等。此外，TaokeOCS v3.2 站点版还具有强大的数据分析功能，可以帮助淘客分析客户行为，优化销售策略。系统还提供了丰富的报表和统计图表，让淘客可以直观地了解业务运行情况。总的来说，TaokeOCS v3.2 站点版是一款功能强大、操作简便的在线客服管理系统，是淘客提升服务质量，提高销售效率的得力工具。无论是对于新手还是有经验的淘客，都可以通过这个系统轻松地进行在线客服管理，提高工作效率，增强客户满意度。重新回答||

    hushubo.zip

    hushubo.zip

    node-v12.8.1-x86.msi

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    node-v9.6.1-x64.msi

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    matlab实现遗传算法matlab源码.zip

    优秀源码设计，详情请查看资源内容

    3D模型004，可用于建模、GIS、BIM、CIM学习

    3D模型004，可用于建模、GIS、BIM、CIM学习

    毕业设计：基于SSM的mysql-口腔护理网站（源码 + 数据库 + 说明文档）

    毕业设计：基于SSM的mysql_口腔护理网站（源码 + 数据库 + 说明文档） 第二章 可行性分析 5 1. 业务流程描述 5 2. 经济可行性 5 3. 技术可行性 6 4. 运行可行性 6 第三章 需求分析 6 1. 健康管理系统的发展历史与现状 6 2. 健康管理系统的需求分析 7 3. 数据字典 7 第四章 总体设计 8 1.系统模块总体设计 8 2.数据库总体设计 9 3.数据库详细设计 9 第五章 详细设计与实现 11 1.运行环境 11 2.开发工具及技术介绍 11 3.系统界面设计 12 第六章 系统测试与性能分析 13 1.软件测试的概念 13 2.本系统的软件测试 13 3.本系统测试的总结 14

    基于matlab开发的单值分类，包括很多的工具函数，使用时直接调用就可，用起来相当方便的，欢迎大家下载.rar

    基于matlab开发的单值分类，包括很多的工具函数，使用时直接调用就可，用起来相当方便的，欢迎大家下载.rar

    毕业设计：基于SSM的mysql-在线考试系统（源码 + 数据库 + 说明文档）

    毕业设计：基于SSM的mysql_在线考试系统（源码 + 数据库 + 说明文档） 第2章 主要技术和工具介绍 1 2.1 SSM 框架 1 2.1.1. Spring 框架 1 2.1.2 SpringMVC 2 2.1.3. MyBatis 的选用 2 2.2 mysql数据库 2 2.3 eclipse与Tomcat简介 2 第3章 系统分析 1 3.1可行性分析 1 3.1.1经济可行性 1 3.1.2技术可行性 1 3.1.3操作可行性 1 3.2需求分析 1 3.3业务流程分析 2 3.4数据流程分析 3 第4章 系统设计 6 4.1系统结构设计 6 4.2功能模块设计 6 4.3数据库设计 7 4.3.1数据库设计概述 7 4.3.1概念设计 7 4.3.2表设计 8 第5章 系统实现 13 5.1基本任务 13 5.2登录模块的实现 14 5.2.1首页实现 14 5.2.2管理员后台登录 14 5.3教师用户模块的实现 17 5.3.1试题信息管理模块的实现 17 5.3.2试卷生成管理模块的实现 18 5.4管理员模块的实现 20 5.4.1系统用户管理模块的实现

    毕业设计：基于SSM的mysql-在线读书与分享论坛（源码 + 数据库 + 说明文档）

    毕业设计：基于SSM的mysql_在线读书与分享论坛（源码 + 数据库 + 说明文档） 2 系统需求设计 5 2.1 系统需求 5 2.2可行性分析 6 2.2.1技术的可行性 6 2.2.2经济的可行性 6 2.2.3操作可行性 7 2.2.4法律的可行性 7 2.4功能模块需求分析 7 3 系统设计 9 3.1系统结构设计 9 3.2 数据库设计 9 3.2.1 数据库实体 10 3.1.2 数据库表设计 12 4 系统的实现 13 4.1 主页的实现 13 4.2 章节信息界面 13 4.3 书籍信息界面 14 4.4 后台管理界面 15 4.6书籍添加管理界面实现 16 4.6书籍类别管理实现 17 5 系统测试 18 5.1 测试的目的及方法 18 5.2功能测试 18 5.3测试用例 19 5.4测试结果 20

    毕业设计：基于SSM的mysql-校园外卖管理系统（源码 + 数据库 + 说明文档）

    毕业设计：基于SSM的mysql_校园外卖管理系统（源码 + 数据库 + 说明文档） 二 关键技术介绍 3 2.1文件的上传和下载 3 2.2 echarts数据展示 3 2.3 MySQL数据库 4 2.4 java语言 5 2.5 MVC框架介绍 5 2.6 B/S结构 5 2.7小结 6 三 需求分析 7 3.1业务背景及需求分析 7 3.2业务建模 7 3.3系统角色分析 7 3.4系统用例分析 8 1、消费者用例图 8 2、 商户用例图 8 3、 管理员用例图 8 3.5非功能性需求 9 3.6小结 9 四 系统分析与设计 10 4.1系统架构 10 4.2系统功能设计 10 4.3数据库设计 12 4.3.1概念结构设计 12 4.3.2逻辑模型设计 13 4.3.3数据库物理模型设计 14 4.4系统界面设计 14 4.5小结 14 五 系统实现 15 5.1系统实现概述 15 5.1.1系统实现描述 15 5.1.2系统开发工具、语言、编码规范 15 5.2功能模块实现 15 5.2.1校园外卖订餐管理系统首页 15 5.2.2消费者会员登录的实现 15 5.2

    TypeScript-2.3.1.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    Python和Flask实现的基于体检数据的城市公共健康可视分析系统源码+使用说明.zip

    优秀源码设计，详情请查看资源内容

    基于matlab开发的简单的TD-SCDMA通信系统仿真

    基于matlab开发的简单的TD-SCDMA通信系统仿真，包括由基本的上下行同步码得到传输用的上下行同步码，信号的调制，通过信道后的解调以及误码率分析。.rar

Magicbox
Global site tag (gtag.js) - Google Analytics