在线编辑器的实现原理(兼容IE和FireFox)


Posted in Javascript onMarch 09, 2007

在线编辑器在我们日常的项目开发中非常有用(如新闻系统),它可以方便地实现文章的在线编辑,省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢?  首先需要IE的支持,在IE5.5以后就有一个编辑状态. 就是利用这个编辑状态,然后用javascript来控制在线编辑的。 
     首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。
     <IFRAME id=“HtmlEdit” style="WIDTH: 100%; HEIGHT: 296px" marginWidth=“0” marginHeight=“0”></IFRAME> 
     并且在加上javascript代码来指定HtmlEdit有编辑功能(下面提供完整的原代码):

<script language="javascript"> 
     var editor; 
     editor = document.getElementById("HtmlEdit").contentWindow;      //只需键入以下设定,iframe立刻变成编辑器。 
     editor.document.designMode = 'On'; 
     editor.document.contentEditable = true; 
     //但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。 
     editor.document.open(); 
     editor.document.writeln('<html><body></body></html>'); 
     editor.document.close(); 
     //字体特效 - 加粗方法一  
     function addBold() 
     { 
     editor.focus(); 
     //所有字体特效只是使用execComman()就能完成。 
     editor.document.execCommand("Bold", false, null); 
     } 
     //字体特效 - 加粗方法二  
     function addBold() 
     { 
     editor.focus(); 
     //获得选取的焦点 
     var sel = editor.document.selection.createRange(); 
     insertHTML("<b>"+sel.text+"</b>"); 
     } 
     function insertHTML(html) 
     { 
         if (editor.document.selection.type.toLowerCase() != "none") 
         { 
         editor.document.selection.clear() ; 
         } 
         editor.document.selection.createRange().pasteHTML(html) ;  
     } 
  </script>
Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 #Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 #Javascript
javascript的对话框详解与参数
Mar 08 #Javascript
打开超链需要“确认”对话框的方法
Mar 08 #Javascript
javascript学习随笔(使用window和frame)的技巧
Mar 08 #Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 #Javascript
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 #Javascript
You might like
PHP 各种排序算法实现代码
2009/08/20 PHP
PHP学习笔记之一
2011/01/17 PHP
php类常量的使用详解
2013/06/08 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PDO::getAttribute讲解
2019/01/28 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 实现网页自动截图的示例讲解
2018/05/17 Python
浅析python继承与多重继承
2018/09/13 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
追悼会上的答谢词
2014/01/10 职场文书
会议主持词
2014/03/17 职场文书
2014年残联工作总结
2014/11/21 职场文书
工人先进事迹材料
2014/12/26 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Nginx实现会话保持的两种方式
2022/03/18 Servers
Python实现双向链表
2022/05/25 Python
Python实现数据的序列化操作详解
2022/07/07 Python