`

富文本编辑器实现关键技术pasteHTML-InsertHTML

 
阅读更多

转载自 smallchicken
最终编辑 smallchicken
先简要介绍一下HTML富文本编辑器实现原理，如果是非所见即所得，那么用 textarea就可以搞定了，如果要实现所见即所得，尤其是你想插入图片之类的，那么就要考虑用其他方式来替换 textarea了，毕竟textarea不能实现“实时预览”。
目前发布的HTML富文本编辑器比如：FCKeditor, TinyMCE等，实现方法基本上都是基于iframe
，在IE浏览器下的标签有一个 contentEditable属性，设置其值为 true就可以实现对其内部元素编辑了，例如 <div contentEditable="true">123</div> 或者 <p contentEditable="true">dds</p>
按照网上的说法是不支持Firefox的，不过我测试了一下，很不幸，Firefox下也可以用的，而且不仅如此，我测试了一下，连 safari 4.0 , Opera9.6 , google chrome , Firefox 3.10 都可以用，有可能是这些高版本的浏览器才加入的吧？或许早期的Firefox不支持呢？ 这个就不知道了，不过，建议那些写技术博客的同仁们，如果自己没有经过测试，最好写清楚了，不要总把别人的博客粘来粘去，即使粘过来，自己也要测试一下！

如果要自己实现一个简单的HTML富文本编辑器，用系统自带的 execCommand(); 来修改，
这是document的一个方法，最先由IE实现，Firefox以及后来的浏览器都支持这个方法了。
尽管如此，这个方法在IE和FF下调用的参数和产生的结果并不一样！
详情请参考execCommand();在IE和FF下的详细参数，

好，切入正题，我们最想做的是什么？
第一步把一个iframe变为可写模式
第二步，在当前光标处插入内容！
有了这两步，就可以实现一个功能不错的编辑器了，我们也无须去考虑复杂的execCommand(); 参数了，
比如你要想把字体加大：只要插入一段 <p style="font-size:24px;">sddsds</p>就可以了
如果要插入一张图片： <img src=""/>代码既规范又简洁！


<iframe src="" frameborder="0" name="editor" id="editor" width="400" height="200" style="border:1px solid #ccc;"></iframe>

这是一个iframe ， 
现在我们用js来修改使得其 document.designMode 为 "On" ，默认为"Off"，这样就打开了 iframe 的可写模式

下面借助JQuery来实现，如果您没有JQuery，可能要另做判断了，因为不同的浏览器 要获取 iframe的document并不相同！
<script>
_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window 
_doc=_win.document;                        // 用 _doc 变量代替 iframe的document 
_doc.designMode = 'On';
</script>
测试一下吧！，看看是不是可写了呢？
以上的代码并没有判断不同的浏览器，按照网上流传的说法：对于IE要用 ： _doc.contentEditable='true'; 来设置。而我测试了，并不需要，只要上面的代码就可以运行了！
测试浏览器： IE6,7,8 Firefox3.10,Opera9.6, Safari 4.0 , google chrome 好，一般我们在打开可写模式后通常要写点东西进去比如 _doc.write('<html><body></body></html>');


下面的代码在IE6下报告没有权限，不知道是不是我哪里设置的不对，open()和close()函数报告没有权限，其他浏览器都正常，如果FF下没有这两个函数，会显示浏览器一直处于刷新状态而IE不会，所以如果没有办法的话可以试着用代码判断一下：

if( $.browser.msie ){
   _doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
}else{
     _doc.open();
     _doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
     _doc.close();
}
不知道有没有可能是我的浏览器问题！
$.browser.msie这是Jquery用来检测浏览器是否为IE！

好，下面来实现最最关键的技术：
在当前的光标处插入HTML代码：

非IE等浏览器支持 _doc.execCommand('InsertHtml','',html); 第一个参数为：'InsertHtml' 第二个参数留空，第三个参数为插入的值
而IE不支持这个方法，但是IE支持 _doc.selection.createRange().pasteHTML(html); 方法
所以下面来实现：


function insertHTML( sHtml )
{
           _win.focus(); 
           if(   $.browser.msie ){
                  _doc.selection.createRange().pasteHTML( sHtml ) ;
           }else{ 
                  _doc.execCommand( 'InsertHtml' , '' , sHtml );
           }
           
}
_win.focus(); // 这一句很关键，如果当前的焦点不在 iframe上面，插入的时候就会插到页面里！而不是iframe里面，至于为什么，还没研究明白！因为_doc明明是iframe的！实在想不通！

好，有了这个方法，下面要实现什么就畅通无阻了！

比如插入一个图片： insertHTML( '<img src="example.png" />' );
试试吧！
其他详细问题在进一步仔细研究！今晚就写到这里，睡觉！
分享到：
| 你好，JOGL - Java与OpenGl的绑定
评论
发表评论

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

相关推荐

    quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor

    quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中...

    富文本summernote.js 图片居中

    富文本编辑器Summernote.js是一款非常流行的开源前端组件，用于创建美观且易于使用的富文本编辑界面。在默认设置下，Summernote不支持图片的居中显示，但通过一些自定义配置或修改源代码，我们可以让图片在编辑器中...

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    在网页开发中，编辑器是常见的一种用户交互组件，它允许用户输入和编辑文本内容，如富文本编辑器。在JavaScript中，对于基于iframe的编辑器，有时我们需要在用户光标所在的位置插入文本或者图片。本文将详细讲解如何...

    ckeditor_notion_pastehtml

    它提醒我们，尽管富文本编辑器提供了很多便利，但定制化的需求总是存在的，而JavaScript正是实现这种定制化的强大工具。通过深入理解这个项目，开发者可以学习到如何更有效地处理富文本编辑器中的HTML内容，提升应用...

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    《wangEditor编辑器失去焦点后依然能原位插入...这种实现方式代码简洁，易于理解，且兼容性良好，是富文本编辑器开发中的一个优秀实践。对于开发者来说，理解这一机制有助于提升自己在处理文本编辑和选区操作时的能力。

    JS实现pasteHTML兼容ie,firefox,chrome的方法

    本文介绍了一个在不同浏览器（IE、Firefox、Chrome）中实现JavaScript的pasteHTML功能的兼容方法。在深入了解这个技术之前，需要了解一些基础知识点： 1. pasteHTML是IE浏览器中的一个内置功能，它允许用户直接在...

    KindEditor从Word复制内容自动文本化

    KindEditor是一款功能强大的开源在线编辑器，常用于网站内容管理系统的富文本输入框。它提供了丰富的编辑功能，如字体设置、段落格式、图片上传等，使得非技术人员也能方便地编辑网页内容。然而，直接从Microsoft ...

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

    在线编辑器的实现原理主要涉及Web页面中的富文本编辑功能，尤其关注如何使其在不同的浏览器，如Internet Explorer（IE）和Firefox中保持兼容性。在本文中，我们将深入探讨在线编辑器的核心技术，并通过示例代码展示...

    vue项目中在可编辑div光标位置插入内容的实现代码

    这个功能在文本编辑器或者富文本编辑场景中非常常见。本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例。 首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`...

    wangEditor V4

    wangEditor V4是一款轻量级、可定制性强的富文本编辑器，专为前端开发者设计。这个编辑器的最新版本提供了许多改进和新特性，旨在提高用户体验和开发者的集成效率。在JavaScript领域，富文本编辑器是网页应用中常见...

    kindeditor使用手册

    KindEditor 是一个功能丰富的网页富文本编辑器，适用于在网页上提供类似 Microsoft Word 的文本编辑体验。本使用手册将详细讲解如何安装、配置以及使用 KindEditor。 ### 一、安装与基本使用 1. **安装步骤**： -...

    光标处插入,兼容IE6,IE7,FF等,适用于编辑器,浏览插入表情

    在Web页面中，用户通过文本输入框或者富文本编辑器进行文字编辑时，光标指示了当前的输入位置。开发者需要在光标所在的位置插入特定内容，例如图片、表情或链接。然而，由于不同浏览器的DOM操作API和行为存在差异，...

    JS中innerHTML和pasteHTML的区别实例分析

    在JavaScript中，innerHTML和pasteHTML都是用于操作HTML文档对象模型（DOM）的两个关键特性，但它们在使用和功能上存在显著的区别。 innerHTML属性是一个非常常用的方法，它允许我们获取或设置HTML元素内部的全部...

    xheditor-1.1.14

    如果想实现更加复杂的交互应用，或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问，那么你可以选择使用方法2，相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法： $('#elm1')....

    html编辑器的回车换行问题解决方案

    这与许多用户期望的行为不符，特别是那些习惯于文本编辑器中按回车键进行换行的用户。在本文中，我们将探讨两种解决这个问题的方法，尽管它们都不是完美的，但可以满足大部分需求。 首先，一种解决方案是在初始化...

    一个符号插入器 中用到的js代码

    这些功能对于开发一个符号插入器或类似的富文本编辑器来说至关重要。开发者可以在此基础上进一步扩展和完善，以满足更多复杂的需求。例如，可以添加更多的事件处理函数，支持更丰富的编辑操作，或者优化用户界面等。

    类似qq空间中的留言编辑器

    类似QQ空间里的留言编辑器. case 1: E.document.execCommand("Bold");break; case 2: E.document.execCommand("Italic");break; case 3: E.document.execCommand("Underline");break; case 6: var _Text=Remove...

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