163Editor 编辑器概览
来源:互联网 发布:网络管理招聘 编辑:程序博客网 时间:2024/05/18 01:54
fck的功能确实很多,这个163的编辑器也是小网站不错的选择。
附件中有163编辑器的源代码。163Editor 编辑器概览
编辑器的源代码结构
不难发现,编辑的页面其实是editor.html.
打开editor.html,
这个html文件有以下几部分组成:
- <body>
- <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg.gif" ……
- ……………………………………………………………………………………
- 这里的内容请读者自己查看源代码这部分的代码……………………………………………
- 就是编辑器的工具栏,主要是一些图片按钮以及事件……………………
- ……………………………………………………………………………………
- ……………………………………………………………………………………
接下去是编辑区域:
- <div id="divEditor">
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- if (document.all) {
- document.write('<table width="100%" height:287px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:286px;width:100%" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"></IFRAME></td></tr></table>');
- }
- else {
- document.write('<table width="100%" height:288px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;background-color:#ffffff"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:283px;width:100%;margin-left:1px;margin-bottom:1px;" frameBorder="0" marginHeight=0 marginWidth=0 src="blankpage.htm"></IFRAME></td></tr></table>');
- }
- //-->
- </SCRIPT>
- </div>
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- if (document.all) {
- document.write('<textarea ID="sourceEditor" style="height:280px;width:100%;display:none">');
- }
- else {
- document.write('<textarea ID="sourceEditor" style="height:282px;width:100%;display:none">');
- }
- //-->
- </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中的全局变量:
- var gSetColorType = "";
- //document.all是ie浏览器特有的属性 gIsIE用于判断当前浏览器是否是IE
- var gIsIE = document.all;
- var gIEVer = fGetIEVer(); //获取当前使用的IE的version
- //页面是否全部加载完毕,包括所有图片和文字。
- //gLoaded的属性在window.onload = function(){……}执行后变为true
- var gLoaded = false;
- var ev = null;
- 入口函数:
- /*
- * 当前页面中的全部内容都加载完毕后,执行这个函数
- */
- window.onload = function()
- {
- try{
- gLoaded = true; //把这个量的值改成true,表示页面已经加载完毕了
- fSetEditable(); //把页面上的指定的iframe变成编辑模式
- fSetFrmClick();
- ResetDomain();
- fSetHtmlContent();
- top.frames["jsFrame"].fHideWaiting();
- }
- catch(e)
- {
- // window.location.reload();
- }
- }
在线html编辑器的原理基本类似,都是iframe标签中用src属性包含一个html文件,用户编辑的时候事实上就是在编辑这个文件。当然,iframe必须为可编辑状态。
如 163Editor中:(163Editor.html)
- <iframe src="editor/editor.html?id=content" frameborder="0" scrolling="no" width="700" height="320"> </iframe>
本文出自 “Taming the JAVA” 博客,请务必保留此出处http://nileader.blog.51cto.com/1381108/302744
点击下载163Editor
- 163Editor 编辑器概览
- 163editor 网页编辑器 获值
- 文本编辑器editor.php
- Svg-Editor在线编辑器
- [AHOI2006]文本编辑器editor
- BZOJ1269 文本编辑器Editor
- 文本编辑器 Editor
- Sprite Editor【精灵编辑器】
- 百度Editor文本编辑器
- Unity Editor编辑器(MenuItem)
- Editor:实用的在线编辑器(WYSIWYG Editor)
- 【Editor】 Unity3D Editor 编辑器简易教程
- KISSY Editor开源编辑器
- MSN Editor编辑器漏洞利用
- [NOI 2003] 文本编辑器 editor
- [bzoj][AHOI2006]文本编辑器editor
- Unity3D Editor 编辑器简易教程
- Greenfish Icon Editor(图标编辑器)
- 第4回 知識エリア「エンタープライズアナリシス」を理解する
- ajax缓存问题
- InMobi获软银2亿美元投资,欲与Google AdMob试比高
- “分布式哈希”和“一致性哈希”的概念与算法实现
- android中wifi使用方法介绍
- 163Editor 编辑器概览
- linux ssh telnet TeraTerm终端中文显示乱码解决方法
- 纯命令行实现.Net项目每日构建(升级版本)
- const使用详解
- 单链表基本操作
- 如何在rdlc报表中获取文本框或某个表格单元格中的内容,报表中表达式的全局集合
- Android睡眠助手 实现情景模式的切换
- 有关strtok函数
- 你真的输不起了,别再孩子了 ·李开复