MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 富文本编辑器兑现关键技术pasteHTML-InsertHTML

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

www.MyException.Cn  网友分享于:2013-08-30  浏览:49次
富文本编辑器实现关键技术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" />' );
试试吧!
其他详细问题在进一步仔细研究!今晚就写到这里,睡觉!

文章评论

程序员都该阅读的书
程序员都该阅读的书
代码女神横空出世
代码女神横空出世
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
每天工作4小时的程序员
每天工作4小时的程序员
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
一个程序员的时间管理
一个程序员的时间管理
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我的丈夫是个程序员
我的丈夫是个程序员
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
老程序员的下场
老程序员的下场
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Java程序员必看电影
Java程序员必看电影
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我是如何打败拖延症的
我是如何打败拖延症的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
鲜为人知的编程真相
鲜为人知的编程真相
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
如何成为一名黑客
如何成为一名黑客
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
旅行,写作,编程
旅行,写作,编程
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
中美印日四国程序员比较
中美印日四国程序员比较
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员应该关注的一些事儿
程序员应该关注的一些事儿
10个调试和排错的小建议
10个调试和排错的小建议
程序员必看的十大电影
程序员必看的十大电影
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员的鄙视链
程序员的鄙视链
编程语言是女人
编程语言是女人
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有