`

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

 
阅读更多

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

分类: js 1243人阅读 评论(0) 收藏 举报
先简要介绍一下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="" name="editor" id="editor" style="border: 1px solid rgb(204, 204, 204);" frameborder="0" height="200" width="400"></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('');


下面的代码在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">' );
试试吧!

引用:http://hi.baidu.com/smallchicken/blog/item/d11908447d6de18ab3b7dc43.html

另一篇:
在线编辑器的大部分功能使用javascript的execCommand函数都可以实现,但是有个问题在实现任意修改文字大小时使用execCommand('FontSize', false, value)只是7种大小可选,编辑器切换为源代码方式看<font size="7"> </font>的方式。呵呵,太笨的方式了,要改为<font style="font-size: 12px;"></font>方式就好了。那就要用到pasteHTML函数了,可是该方法除ie外其他浏览器都不支持。网上很多文章都抱怨其他的浏览器不支持pasteHTML函数。呵呵,其实不是ie浏览器实现更方便,使用execCommand('insertHTML', false, value)(注意该函数使用'insertHTML'参数ie不支持)。因此判断是ie使用pasteHTML方法非ie使用execCommand('insertHTML', false, value)方法,使用它就可以把指定的文字段替换为你想要的文字了。呵呵有了它不管是插入图片,生成链接(使用execCommand方法直接实现的话就不能带参数了比如你<img>内要带alt, <a>内要带target)你都能玩转了。其他也可以方便实现,比如插入带颜色的横线,插入块</a><div></div><a>带上你喜欢的样式。 
(以上方法我只测试了firefox可行,其他浏览器有待证实)。
分享到:
评论

相关推荐

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

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

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

    主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    xheditor-1.1.14

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

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

    主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下

    类似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...

    xhEditor编辑器 v0.9.7 简体中文

    软件介绍xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。Features(特点): Small:初始加载5个文件,包括:...

    xheditor v1.0.0 rc2 build 100401

    xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。 xhEditor is a simple,small,fast WYSWYG(What You See ...

    ckeditor_notion_pastehtml

    ckeditor_notion_pastehtml

    js正文内容高亮效果的实现方法

    代码如下://高亮显示搜索到的关键字function HeightLight(Keyword){ //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange();...

    firefox下javascript实现高亮关键词的方法

    “点睛”的广告代码,很牛B,本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的,我看了大半天,楞是没有看出个所以然来!还是自己慢慢研究吧。

    js使用小技巧

    可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^x00-xff]/ 汉字 /[u4e00-u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; ...

    javascript高亮效果的二种实现方法

    js高亮方法一: 代码如下:[removed] ... while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”); keyword.moveStart(‘character’,1); } } } function highword(nWord){ var array = nWo

Global site tag (gtag.js) - Google Analytics