富文本web在线编辑器实现关键技术pasteHTML-InsertHTML
这是一个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可行,其他浏览器有待证实)。