| 富文本编辑器实现关键技术pasteHTML-InsertHTML |
先简要介绍一下HTML富文本编辑器实现原理，如果是非所见即所得，那么用 textarea就可以搞定了，如果要实现所见即所得，尤其是你想插入图片之类的，那么就要考虑用其他方式来替换 textarea了，毕竟textarea不能实现“实时预览”。
cM4Seb http://blog.numino.net/
目前发布的HTML富文本编辑器比如：FCKeditor, TinyMCE等，实现方法基本上都是基于iframe
YqDk5G http://blog.numino.net/
，在IE浏览器下的标签有一个 contentEditable属性，设置其值为 true就可以实现对其内部元素编辑了，例如 <div contentEditable="true">123</div> 或者 <p contentEditable="true">dds</p>
10873S http://blog.numino.net/
按照网上的说法是不支持Firefox的，不过我测试了一下，很不幸，Firefox下也可以用的，而且不仅如此，我测试了一下，连 safari 4.0 , Opera9.6 , google chrome , Firefox 3.10 都可以用，有可能是这些高版本的浏览器才加入的吧？或许早期的Firefox不支持呢？ 这个就不知道了，不过，建议那些写技术博客的同仁们，如果自己没有经过测试，最好写清楚了，不要总把别人的博客粘来粘去，即使粘过来，自己也要测试一下！
hZe08M http://blog.numino.net/
如果要自己实现一个简单的HTML富文本编辑器，用系统自带的 execCommand(); 来修改，
ktZG0P http://blog.numino.net/
这是document的一个方法，最先由IE实现，Firefox以及后来的浏览器都支持这个方法了。
TlHmSJ http://blog.numino.net/
尽管如此，这个方法在IE和FF下调用的参数和产生的结果并不一样！
tZYQzo http://blog.numino.net/
详情请参考execCommand();在IE和FF下的详细参数，
9qq5jq http://blog.numino.net/
好，切入正题，我们最想做的是什么？
dVZYCF http://blog.numino.net/
第一步把一个iframe变为可写模式
87YH5J http://blog.numino.net/
第二步，在当前光标处插入内容！
vHMZVh http://blog.numino.net/
有了这两步，就可以实现一个功能不错的编辑器了，我们也无须去考虑复杂的execCommand(); 参数了，
nF4yw1 http://blog.numino.net/
比如你要想把字体加大：只要插入一段 <p style="font-size:24px;">sddsds</p>就可以了
fp7ZIY http://blog.numino.net/
如果要插入一张图片： <img src=""/>代码既规范又简洁！
udj8eG http://blog.numino.net/
<iframe src="" frameborder="0" name="editor" id="editor" width="400" height="200" style="border:1px solid #ccc;"></iframe>
RnSBel http://blog.numino.net/
这是一个iframe ，
v8cqxS http://blog.numino.net/
现在我们用js来修改使得其 document.designMode 为 "On" ，默认为"Off"，这样就打开了 iframe 的可写模式
MJ081z http://blog.numino.net/
下面借助JQuery来实现，如果您没有JQuery，可能要另做判断了，因为不同的浏览器 要获取 iframe的document并不相同！
F17ZYr http://blog.numino.net/
<script>
wd9c36 http://blog.numino.net/
_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window
HJpWA3 http://blog.numino.net/
_doc=_win.document; // 用 _doc 变量代替 iframe的document
ybddH8 http://blog.numino.net/
_doc.designMode = 'On';
lLrjdJ http://blog.numino.net/
</script>
q0Nlj6 http://blog.numino.net/
测试一下吧！，看看是不是可写了呢？
3L9CeR http://blog.numino.net/
以上的代码并没有判断不同的浏览器，按照网上流传的说法：对于IE要用 ： _doc.contentEditable='true'; 来设置。而我测试了，并不需要，只要上面的代码就可以运行了！
lG747m http://blog.numino.net/
测试浏览器： IE6,7,8 Firefox3.10,Opera9.6, Safari 4.0 , google chrome 好，一般我们在打开可写模式后通常要写点东西进去比如 _doc.write('<html><body></body></html>');
KkwBU6 http://blog.numino.net/
下面的代码在IE6下报告没有权限，不知道是不是我哪里设置的不对，open()和close()函数报告没有权限，其他浏览器都正常，如果FF下没有这两个函数，会显示浏览器一直处于刷新状态而IE不会，所以如果没有办法的话可以试着用代码判断一下：
kn5ne6 http://blog.numino.net/
if( $.browser.msie ){
99WBtP http://blog.numino.net/
_doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
d1t87N http://blog.numino.net/
}else{
8T4wjZ http://blog.numino.net/
_doc.open();
J3ebXS http://blog.numino.net/
_doc.write('<img src="ui/images/info.gif"/> <h1>haha</h1>');
IpSiy8 http://blog.numino.net/
_doc.close();
BeE9P0 http://blog.numino.net/
}
C1gYlU http://blog.numino.net/
不知道有没有可能是我的浏览器问题！
QrgLjq http://blog.numino.net/
$.browser.msie这是Jquery用来检测浏览器是否为IE！
CuD74u http://blog.numino.net/
好，下面来实现最最关键的技术：
IiU5VQ http://blog.numino.net/
在当前的光标处插入HTML代码：
B26r3H http://blog.numino.net/
非IE等浏览器支持 _doc.execCommand('InsertHtml','',html); 第一个参数为：'InsertHtml' 第二个参数留空，第三个参数为插入的值
2ldxw7 http://blog.numino.net/
而IE不支持这个方法，但是IE支持 _doc.selection.createRange().pasteHTML(html); 方法
De1kyT http://blog.numino.net/
所以下面来实现：
Zb5MT2 http://blog.numino.net/
function insertHTML( sHtml )
WK3C5o http://blog.numino.net/
{
2uEUMX http://blog.numino.net/
_win.focus();
3cFp2t http://blog.numino.net/
if( $.browser.msie ){
qa6clH http://blog.numino.net/
_doc.selection.createRange().pasteHTML( sHtml ) ;
HWl212 http://blog.numino.net/
}else{
fzfNCv http://blog.numino.net/
_doc.execCommand( 'InsertHtml' , '' , sHtml );
I32f7k http://blog.numino.net/
}
d2vT8k http://blog.numino.net/
VBd2j5 http://blog.numino.net/
}
T75KQP http://blog.numino.net/
_win.focus(); // 这一句很关键，如果当前的焦点不在 iframe上面，插入的时候就会插到页面里！而不是iframe里面，至于为什么，还没研究明白！因为_doc明明是iframe的！实在想不通！
FyQL8P http://blog.numino.net/
好，有了这个方法，下面要实现什么就畅通无阻了！
ljZFp4 http://blog.numino.net/
比如插入一个图片： insertHTML( '<img src="example.png" />' );
a5j6V6 http://blog.numino.net/
试试吧！
d79KX5 http://blog.numino.net/
其他详细问题在进一步仔细研究！今晚就写到这里，睡觉！
|
|