更多相关内容...>>富文本编辑器实现关键技术pasteHTML-InsertHTML
富文本编辑器实现关键技术pasteHTML-InsertHTML
先简要介绍一下HTML富文本编辑器实现原理,如果是非所见即所得,那么用 textarea就可以搞定了,如果要实现所见即所得,尤其是你想插入图片之类的,那么就要考虑用其他方式来替换 textarea了,毕竟textarea不能实现“实时预览”。
5xL7GY http://www.numino.net
目前发布的HTML富文本编辑器比如:FCKeditor, TinyMCE等,实现方法基本上都是基于iframe
yPivJb http://www.numino.net
,在IE浏览器下的标签有一个 contentEditable属性,设置其值为 true就可以实现对其内部元素编辑了,例如 <div contentEditable="true">123</div> 或者 <p contentEditable="true">dds</p>
nrAUo9 http://www.numino.net
按照网上的说法是不支持Firefox的,不过我测试了一下,很不幸,Firefox下也可以用的,而且不仅如此,我测试了一下,连 safari 4.0 , Opera9.6 , google chrome , Firefox 3.10 都可以用,有可能是这些高版本的浏览器才加入的吧?或许早期的Firefox不支持呢? 这个就不知道了,不过,建议那些写技术博客的同仁们,如果自己没有经过测试,最好写清楚了,不要总把别人的博客粘来粘去,即使粘过来,自己也要测试一下!
Zoi3wA http://www.numino.net
如果要自己实现一个简单的HTML富文本编辑器,用系统自带的 execCommand(); 来修改,
h5S0pl http://www.numino.net
这是document的一个方法,最先由IE实现,Firefox以及后来的浏览器都支持这个方法了。
h6Nec1 http://www.numino.net
尽管如此,这个方法在IE和FF下调用的参数和产生的结果并不一样!
TSF9kX http://www.numino.net
详情请参考execCommand();在IE和FF下的详细参数,
2HOGkI http://www.numino.net
好,切入正题,我们最想做的是什么?
1Yre71 http://www.numino.net
第一步把一个iframe变为可写模式
pMGYUK http://www.numino.net
第二步,在当前光标处插入内容!
Ovqyun http://www.numino.net
有了这两步,就可以实现一个功能不错的编辑器了,我们也无须去考虑复杂的execCommand(); 参数了,
GL7tL1 http://www.numino.net
比如你要想把字体加大:只要插入一段 <p style="font-size:24px;">sddsds</p>就可以了
v4rrHt http://www.numino.net
如果要插入一张图片: <img src=""/>代码既规范又简洁!
739Duk http://www.numino.net
<iframe src="" frameborder="0" name="editor" id="editor" width="400" height="200" style="border:1px solid #ccc;"></iframe>
H883D7 http://www.numino.net
这是一个iframe ,
uZVv6Q http://www.numino.net
现在我们用js来修改使得其 document.designMode 为 "On" ,默认为"Off",这样就打开了 iframe 的可写模式
d8oM5h http://www.numino.net
下面借助JQuery来实现,如果您没有JQuery,可能要另做判断了,因为不同的浏览器 要获取 iframe的document并不相同!
zZh8Fr http://www.numino.net
<script>
SMdjs4 http://www.numino.net
_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window
yvjTZt http://www.numino.net
_doc=_win.document; // 用 _doc 变量代替 iframe的document
qzg6FP http://www.numino.net
_doc.designMode = 'On';
W5mmwS http://www.numino.net
</script>
oiR58c http://www.numino.net
测试一下吧!,看看是不是可写了呢?
30yo3w http://www.numino.net
以上的代码并没有判断不同的浏览器,按照网上流传的说法:对于IE要用 : _doc.contentEditable='true'; 来设置。而我测试了,并不需要,只要上面的代码就可以运行了!
F5Qi28 http://www.numino.net
测试浏览器: IE6,7,8 Firefox3.10,Opera9.6, Safari 4.0 , google chrome 好,一般我们在打开可写模式后通常要写点东西进去比如 _doc.write('<html><body></body></html>');
65Z8w7 http://www.numino.net
下面的代码在IE6下报告没有权限,不知道是不是我哪里设置的不对,open()和close()函数报告没有权限,其他浏览器都正常,如果FF下没有这两个函数,会显示浏览器一直处于刷新状态而IE不会,所以如果没有办法的话可以试着用代码判断一下:
S3KlCM http://www.numino.net
if( $.browser.msie ){
Pgtb9t http://www.numino.net
_doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
bi3W53 http://www.numino.net
}else{
b3uawH http://www.numino.net
_doc.open();
ZSsjWg http://www.numino.net
_doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
7grXB2 http://www.numino.net
_doc.close();
38fChv http://www.numino.net
}
6s02Ui http://www.numino.net
不知道有没有可能是我的浏览器问题!
K123W8 http://www.numino.net
$.browser.msie这是Jquery用来检测浏览器是否为IE!
Ce0Ig5 http://www.numino.net
好,下面来实现最最关键的技术:
p8R629 http://www.numino.net
在当前的光标处插入HTML代码:
QQH4Bc http://www.numino.net
非IE等浏览器支持 _doc.execCommand('InsertHtml','',html); 第一个参数为:'InsertHtml' 第二个参数留空,第三个参数为插入的值
dYRV88 http://www.numino.net
而IE不支持这个方法,但是IE支持 _doc.selection.createRange().pasteHTML(html); 方法
OD3kUY http://www.numino.net
所以下面来实现:
nZ7zj6 http://www.numino.net
function insertHTML( sHtml )
VZlquD http://www.numino.net
{
TFe2GF http://www.numino.net
_win.focus();
B93MYz http://www.numino.net
if( $.browser.msie ){
tH2BbF http://www.numino.net
_doc.selection.createRange().pasteHTML( sHtml ) ;
cLPPKr http://www.numino.net
}else{
QW6uN8 http://www.numino.net
_doc.execCommand( 'InsertHtml' , '' , sHtml );
0x4Z7a http://www.numino.net
}
Fabz6q http://www.numino.net

93S6C6 http://www.numino.net
}
H74SA7 http://www.numino.net
_win.focus(); // 这一句很关键,如果当前的焦点不在 iframe上面,插入的时候就会插到页面里!而不是iframe里面,至于为什么,还没研究明白!因为_doc明明是iframe的!实在想不通!
A5TGg0 http://www.numino.net
好,有了这个方法,下面要实现什么就畅通无阻了!
QHfFpe http://www.numino.net
比如插入一个图片: insertHTML( '<img src="example.png" />' );
XXQn4u http://www.numino.net
试试吧!
t8IaTm http://www.numino.net
其他详细问题在进一步仔细研究!今晚就写到这里,睡觉!
更多相关内容...>>富文本编辑器实现关键技术pasteHTML-InsertHTML

Bug报告 |  免责声明 |  联系我们 |  加入收藏

Copyright © 2006 NuminoStudio(www.numino.net) All Rights Reserved