在线编辑器的实现原理(兼容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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php5 and xml示例
2006/11/22 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python计算程序运行时间的方法
2014/12/13 Python
python文件与目录操作实例详解
2016/02/22 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
用python读取xlsx文件
2020/12/17 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
化工专业自荐书
2014/06/16 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
清明节寄语2015
2015/03/23 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015年档案室工作总结
2015/05/23 职场文书
员工安全责任协议书
2016/03/22 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby