163的在线编辑器简析和配置使⽤
fck的功能确实很多，这个163的编辑器也是⼩⽹站不错的选择。
附件中有163编辑器的源代码。
163Editor 编辑器概览
编辑器的源代码结构
不难发现，编辑的页⾯其实是editor.html.
打开editor.html,
这个html⽂件有以下⼏部分组成：
1. <body>
2. <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg.gif" ……
3. ……………………………………………………………………………………
4. 这⾥的内容请读者⾃⼰查看源代码这部分的代码……………………………………………
5. 就是编辑器的⼯具栏，主要是⼀些图⽚按钮以及事件……………………
6. ……………………………………………………………………………………
7. ……………………………………………………………………………………
接下去是编辑区域：
1. <div id="divEditor">
2. <SCRIPT LANGUAGE="JavaScript">
3. <!--
4. if (document.all) {
5. document.write('<table width="100%" height:287px border="0" cellspacing="0" cellpadding="0" ><tr>
<td >
<IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"> </IFRAME></td></tr></table>');
6. }
7. else {
8. document.write('<table width="100%" height:288px border="0" cellspacing="0" cellpadding="0" ><tr>
<td >
<IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"></IFRAME></td></tr></table>');
9. }
10. //-->
11. </SCRIPT>
12. </div>
13. <SCRIPT LANGUAGE="JavaScript">
14. <!--
15. if (document.all) {
16. document.write('<textarea ID="sourceEditor" >');
17. }
18. else {
19. document.write('<textarea ID="sourceEditor" >');
20. }
21.
22. //-->
23. </SCRIPT>
这是说明⼏点：
Editor.html 中其实是有两个⽂本区域，分别是
<IFRAME ID="HtmlEditor" name="HtmlEditor" 和
<textarea ID="sourceEditor"
这⾥还有⼀点是：
此处的iframe⼜src了个页⾯ blankpage.html
所以，得出⼀个⽐较重要的结论：163编辑器的编辑区域中的内容最终是显⽰blankpage.html中的内容，也就是说⽤户其实是在编辑这个页⾯
⾄此，editor.html
分析editor.html中包含进的⼏个js⽂件
script/editfunc.js
这个⽂件定义了编辑器的⼏个核⼼function
这个js中的全局变量：
1. var gSetColorType = "";
2. //document.all是ie浏览器特有的属性 gIsIE⽤于判断当前浏览器是否是IE
网站源码在线3. var gIsIE = document.all;
4. var gIEVer = fGetIEVer(); //获取当前使⽤的IE的version
5. //页⾯是否全部加载完毕，包括所有图⽚和⽂字。
6. //gLoaded的属性在load = function(){……}执⾏后变为true
7. var gLoaded = false;
8. var ev = null;
9.
10. ⼊⼝函数：
11. /*
12. * 当前页⾯中的全部内容都加载完毕后，执⾏这个函数
13. */
14. load = function()
15. {
16. try{
17. gLoaded = true; //把这个量的值改成true，表⽰页⾯已经加载完毕了
18. fSetEditable(); //把页⾯上的指定的iframe变成编辑模式
19. fSetFrmClick();
20. ResetDomain();
21. fSetHtmlContent();
22. top.frames["jsFrame"].fHideWaiting();
23. }
24. catch(e)
25. {
26. // load();
27. }
28. }
在线html编辑器的原理基本类似，都是iframe标签中⽤src属性包含⼀个html⽂件，⽤户编辑的时候事实上就是在编辑这个⽂件。当然，iframe必须为可编辑状态。
如 163Editor中：（163Editor.html）
1. <iframe src="editor/editor.html?id=content" frameborder="0" scrolling="no" width="700" height="320"> </iframe>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论