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

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量507 收藏
点赞数
分类专栏： Html Javascript css ajax 文章标签： firefox ie javascript iframe function 前端开发
 

在线编辑器在我们日常的项目开发中非常有用（如新闻系统），它可以方便地实现文章的在线编辑，省掉了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>


文章来源于 前端开发 | HTML , CSS & JavaScript--mon的博客:http://monw3c.blogbus.com/logs/33641688.html

hitop0609
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebOffice浏览器兼容性设置
代码改变生活
01-12 6968
weboffice官方下载地址： http://www.officectrl.com/download_01.htm //WebOffice问题解决 http://forum.dianju.cn/viewforum.php?f=3&sid=691ec321f8b5218ff9a0d259f83e0498 weboffice浏览器兼容性设置 //浏览器兼...
css兼容浏览器火狐,常见IE和火狐的CSS兼容性问题
weixin_28722339的博客
08-03 1339
这里向大家介绍一下IE和火狐的CSS兼容性问题解决方法，在区别火狐和IE时最常用的是!important方法，对于区分其他不同浏览器和浏览器的不同版本的兼容性问题还有下面一些方法，比如:@import,注释,属性选择符,子对象选择符和voice-family等方法,这些方法在《CSS网站布局实录》中有讲述。下面是IE和火狐的CSS兼容性问题1.DOCTYPE影响CSS处理2.FF(火狐):DIV设...
weboffice for chrome firefox
04-01
weboffice for chrome firefox,点聚weboffice兼容谷歌chrome与firefox浏览器，解决了weboffice在谷歌下无法使用的问题
如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器
热门推荐
white__cat的专栏
07-29 3万+
关于点聚的weboffice ActiveX插件的使用在IE下只需要安装对应weboffice.ocx插件即可实现在线文档编辑。对于非IE如谷歌、火狐浏览器来说就有些不同了的，如果想要兼容谷歌和火狐需要采用标准的NPAPI的开发的插件，具体的需要做以下几个步骤： 1、请安装下面链接地址的插件包 目前版本：http://code.google.com/p/ff-activex-host/
火狐 html编辑器安装,在线编辑器的实现原理(兼容IE和FireFox)
weixin_39815456的博客
06-07 205
在线编辑器在我们日常的项目开发中非常有用(如新闻系统)，它可以方便地实现文章的在线编辑，省掉了FrontPage等工具。那么是怎样实现浏览器在线编辑功能的呢?首先需要IE的支持,在IE5.5以后就有一个编辑状态.就是利用这个编辑状态,然后用javascript来控制在线编辑的。首先要有一个编辑框，这个编辑框其实就是一个可编辑状态的网页，我们用iframe来建立编辑框。并且在加上javasc...
简单HTML在线编辑器实现原理(兼容IE和FireFox)(转)
javazhuanzai的专栏
01-15 241
====================================================== 注：本文源代码点此下载 ====================================================== 首先要有一个编辑框,这个编辑框其实就是一个可编辑状态的网页, 我们用iframe来建立编辑框。 并且在加上javascript代码来指定html
ie8 html在线编辑器,解决IE8不支持eWebEditor在线文本编辑器的方法
weixin_34281191的博客
05-31 436
最近我把IE浏览器更新到了IE8.0，可是在用eWebEditor在线HTML文本编辑器的时候问题来了，点击eWebEditor上的所有编辑按钮都没用，只看到浏览器状态栏左下角显示网页上有错误字样。看来eWebEditor真的是很脆弱啊，先是漏洞百出，Firefox不支持，现在IE8也不支持了，真的很郁闷，不过还好，经过研究，问题最终得到了解决。解决IE8不支持eWebEditor在线文本编辑器的...
简单的html编辑器原理,HTML在线编辑器的原理(转载)_BLUE WIND
weixin_30558657的博客
05-31 388
HTML在线编辑器的基本概念1，什么是HTML在线编辑器顾名思义，在线编辑器就是用于在线编辑的工具，编辑的内容是基于HTML的文档。2，HTML在线编辑器有什么用？因为HTML在线编辑器可用于在线编辑基于HTML的文档，所以，它经常被用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方。3，什么是DHTMLDHTML是一些现有网页技术与标准的整合，通过它，网页设计可以用一种...
html不兼容火狐怎么办,JS在IE和Firefox兼容性问题及解决方案
weixin_42133861的博客
06-07 479
你对JS在IE和Firefox兼容性问题解决方法是否熟悉，这里和大家分享一下，比如现有代码中存在许多document.formName.item("itemName")这样的语句，不能在MF下运行。我们可以改用document.formName.elements["elementName"]来解决。JS在IE和Firefox兼容性问题汇编以下以IE代替InternetExplorer，以MF代替M...
在线编辑器的实现原理(兼容IE和FireFox)
10-31
总的来说，实现一个兼容IE和Firefox的在线编辑器，关键在于理解和使用浏览器提供的API，如`designMode`、`contentEditable`、`execCommand`以及处理选区的方法。通过这些技术，我们可以创建一个用户友好的界面，让...
JS实现pasteHTML兼容ie,firefox,chrome的方法
11-22
本文将详细介绍如何使用JavaScript实现一个兼容IE、Firefox和Chrome的`pasteHTML`方法。 首先，我们要理解在不同浏览器中处理粘贴事件的方式： 1. **Internet Explorer (IE)**：在IE中，我们可以使用`document....
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
11-22
本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下： <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"&...
qq空间html在线编辑器,如何实现一个在线编辑器
weixin_32896083的博客
05-30 169
看了现在网上流行的在线编辑器，也忍不住想了解一下原理。下了目前应用最广泛的 eWebEdit，这个是我见到的最强的开源在线编辑器。研究了一天，终于知道了核心原理。先解释一下在线编辑器的原理：首先需要 IE5.0 以上版本的支持。因为 IE5.0 以上版本有一个编辑状态，可以在一个 iframe 里面输入文字。然后通过 "document.body.innerHTML" 可以获取iframe 里面的...
Nginx+Tomcat负载均衡、动静分离
qq_63994746的博客
08-23 726
Tomcat 概述最初是由Sun的软件构架师詹姆斯·邓肯·戴维森开发安装Tomcat后，安装路径下面的目录和文件，是使用或者配置Tomcat的重要文件Tomcat 重要目录目录名作用bin存放启动和关闭Tomcat的脚本conf存放Tomcat 不同的配置文件doc存放Tomcat文档lib存放Tomcat 运行需要的jar包（库文件）logs存放Tomcat运行过程中产生的日志文件src存放Tomcat的源代码webappsTomcat的主要web发布目录。
vue ref和reactive区别
最新发布
灰海
08-25 362
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
2024前端面试题-js篇
FormAda的博客
08-22 879
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 374
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 374
【代码】【js】各类前端输入校验方法。
iframe实现在线编辑器
09-06
引用中提到了在HTML中定义一个iframe元素，用于实现在线编辑器。该iframe元素具有属性frameborder="0"和id="editor"。 引用中提到了使用JavaScript来实现在iframe编辑器中插入内容的方法。该方法可以通过获取iframe元素的document对象，然后使用document的相关方法来插入内容。 在实现iframe在线编辑器时，可以使用以下步骤： 1. 在HTML中定义一个iframe元素，设置其id属性为"editor"。 2. 使用JavaScript获取到该iframe元素，并保存为一个变量，例如eleEditor。 3. 使用eleEditor的contentWindow属性获取到iframe的window对象，保存为一个变量，例如editorWin。 4. 使用editorWin的document属性获取到iframe的document对象，保存为一个变量，例如editorDoc。 5. 可以使用editorDoc的相关方法来操作iframe中的内容，例如插入文本、插入HTML等。 需要注意的是，不同浏览器对于iframe的contentWindow和contentDocument的兼容性有所不同。在引用中提到，对于不需要兼容contentWindow的情况，可以直接使用$('#Editor').get(0).contentWindow来获取iframe的window对象，而对于Firefox和IE8，可以使用$('#Editor').get(0).contentDocument来获取iframe的document对象。 因此，通过以上步骤和引用的内容，可以实现一个基本的iframe在线编辑器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [iframe实现编辑器](https://blog.csdn.net/wjlotus/article/details/50455020)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)](https://download.csdn.net/download/weixin_38565631/13139540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值