163的在线编辑器简析和配置使用

fck的功能确实很多，这个163的编辑器也是小网站不错的选择。
附件中有163编辑器的源代码。

163Editor 编辑器概览

163编辑器概览

编辑器的源代码结构

代码结构

不难发现，编辑的页面其实是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>

163的在线编辑器简析和配置使用相关推荐

Webwork 学习之路【08】结合实战简析Controller 配置
虽然现在 MVC 框架层出不穷,但做为 Struts 前身的 webwork. 其经典程度不亚于贝利之于足球,双 11 之于淘宝特卖. 本篇将结合 webwork controller 配置文件 xw ...
DNS-over-HTTPS(DoH)简析与配置
本文同步发布于 Heliumの博客,到我的博客阅读体验更佳QwQ DNS是什么 DNS(Domain Name System)是一项网络服务,用途是对全球各个网站的域名进行解析.如果听不懂上面这句话也 ...
FCKeditor WEB在线编辑器配置手册
fckeditor精简之道 1.临时文件及文件夹删除:从根目录下开始删除一切以"_"开头的文件及文件夹,因为他们为临时文件和文件夹.删除这类临时文件及文件夹之后,我们还要删除 ...
ICDE2020论文简析:空间众包实时交叉在线匹配 - Real Time Cross Online Matching in Spatial Crowdsourcing
ICDE2020论文简析:空间众包实时交叉在线匹配 - Real Time Cross Online Matching in Spatial Crowdsourcing 研究现状作者贡献概念定义 ...
Unity3d资源反编译. AssetBundle格式简析+简单应用+爬坑
=================== Unity3d资源反编译工具 DisUnity ================ 源码:https://github.com/ata4/disunity 需要 ...
linux安装最新版的glib库,GLib库安装与简析
GLib是GTK+和GNOME工程的基础底层核心程序库,是一个综合用途的实用的轻量级的C程序库, 它提供C语言的常用的数据结构的定义.相关的处理函数,有趣而实用的宏, 可移植的封装和一些运行时机能,如 ...
Java中高级核心知识全面解析——Redis(集群【概述{主从复制、哨兵、集群化}、数据分区方案、节点通信机制、数据结构简析】)5
目录一.[集群]入门实践教程 1.Redis 集群概述 1)Redis 主从复制 2)Redis 哨兵 3)Redis 集群化 2.主从复制 1)主从复制主要的作用 2)快速体验 ①.第一步:本地启 ...
机器视觉硬件选型简析
机器视觉硬件选型简析一.相机选型二.镜头选型三.光源选型四.选型工具五.应用举例参考文档一.相机选型搭建机器视觉硬件系统,相机的选择很大程度上决定了所成的图像的质量,包括图像分辨率.图 ...
Mysql锁机制及原理简析
Mysql锁机制及原理简析一.前言 1.什么是锁? 锁是计算机协调多个进程或线程并发访问某一资源的机制. 锁保证数据并发访问的一致性.有效性: 锁冲突也是影响数据库并发访问性能的一个重要因素. 锁是 ...
不同直播场景的CDN技术简析
随着直播行业的兴起,各种直播应用.平台和产品万花齐放,直播场景也越来越多元化,这就对视频技术的发展提出了"日新月异"的需求.那么,目前视频直播的场景主要有哪些?不同类型的直播场景对 ...

163的在线编辑器简析和配置使用

163的在线编辑器简析和配置使用相关推荐

最新文章

热门文章