html的js开发在线编辑器一

【网页编辑器开发】html在线网页编辑器开发第一讲

2010-10-9 12:34:59

前 言

电脑的Ctrl+C和Ctrl+V不知道方便了多少人，就是因为在电脑中所有的东西都是由0和1组成，无论是什么东西，只需要按下Ctrl+C就会让其记住编码格式，然后Ctrl+V用0和1重新按着一定的编码格式排列，这样新的产品就诞生了，也许有一天，当人类破解了万物之密码，也可以就地取材（原子，分子）然后复制出自己想要的事物，包括人见人爱的money。

很多人做网站喜欢去网上找源码，找到符合自己要求的就down下来，改改页面就变成自己的，但随着后期需求的不断增加之前符合自己要求的系统也会逐渐的被自己改的面目全非，而且还经常是改了一个问题从而牵连出其它的问题，我07年从事的公司用过大量网络源码，除了很难维护外还经常受到黑客的攻击，一时半会儿很难找出漏洞，着实让你头疼不已，从那以后我决定不再用现成的代码，一切都自己开发，后来随着水平的提高，现在开发网站几乎感觉不到任何难度，但只有一点是令我一直很头痛的问题，那就是网页编辑器。

我曾经先后换过很多款编辑器，要么不符合自己的要求，要么功能太杂太乱，总之就没有一个能适合自己的，08年用过的编辑器还出现了很多漏洞导致被黑客给网站挂了木马，后来把漏洞修复以后随着浏览器的升级又接二连三的出现过很多问题，从那以后决定自己写一个简单的编辑器，只做自己需要的功能。

ie8下ewebeditor无法解决的问题，通过这篇文章的评论和浏览次数可以发现，单是遇到这样一个简单问题的人就有很多，因为我这篇文章在百度上的排名时间并不是很长，所以不能代表所有遇到此问题的人，但从这一现象可以推测用这个编辑器的人不少。

除了有漏洞，无效等问题以外，还有代码被执行等等很多问题，比如我发布了一些asp或html的源代码到我的文章里，用编辑器编辑好发布之后，等我再次编辑的时候发现，代码竟然被编辑器给执行了，这对于一个经常写技术类文章的人来说确实是很杯具的一件事。

一、了解网页编辑器

我在做自己的网页编辑器之前总以为这东西很难，好像在程序员的大脑里都认为只要是js的东西都很难，所以就懒得去看这些东西，后来有一天我在一个网站上看到了一个特别简易的编辑器之后我把源码down下来仔细的研究了一下才知道，原来这东西一点都不难，下面我就通过我对网页编辑器的认识和大家一起开发一款适用于自己的网页编辑器。

请记住这句话：别人的再好，不如自己的好，别人会，不如自己会。

简单来概括一下网页编辑器是什么：网页编辑器所要实现的功能就是在网页里模拟一个浏览器预览的可编辑环境来对网页要显示的内容进行有效的编排以达到页面美观的目的。

网页编辑器大部分是用js开发的，利用javascript的脚本对编辑器里的文字进行格式的增加删除修改，有部分功能需要配合程序来实现，比如一些敏感词过滤，代码过滤，部分格式过滤，图片上传等等。

 

这是我这个博客后台用的编辑器，下面再看一下tv150店铺推广论坛里用的编辑器：

都很简洁，都是按着我的需求编写出来的。

三、网页编辑器中编辑框的制作

大多数编辑器的编辑框都是用div或iframe做的，今天要教大家的是用iframe来做一个编辑框，我们先来看代码：

<iframe src="TianDaoEditor/TianDaoeditor.asp" id="message" frameborder="0" width="720" height="350"></iframe>
<script language="javascript">frames.message.document.designMode = "On";</script>

代码解释：

src里面引用的是另一个网页的地址，这里可以是asp的，也可以是html的或aspx，jsp，php都是可以的，也可以是about:blank的，如：<iframe src="about:blank" id="message" />

后面的属性都是html的基本属性，width是宽，height是高，frameborder是框架的宽度，这里设置为0是不让出现框架的边框。

frames.message.document.designMode="On";是让这个iframe变为可编辑状态，有的时候为了不让一些蜘蛛程序把编辑器里面的地址给抓取到，我们也经常这样写：

<script language="JavaScript" type="text/javascript"> document.write (''<iframe src="TianDaoEdit/TiandaoEdit.asp" id="message" frameborder="0" width="500" height="155"></iframe>''); frames.message.document.designMode = "On";</script> 这里要注意disignMode="On"这句话的位置，一定要在iframe后面，否则有的时候在火狐或谷歌浏览器里面无法进入编辑状态。

下面我们举个例子来说明一下：

代码如下：

<table width="100" height="100" border="1">
<tr>
<td> <iframe src="about:blank" id="message" frameborder="0" width="100" height="100"></iframe>
<script language="javascript">frames.message.document.designMode = "On";</script></td>
</tr>
</table>

你可以把代码复制下去放到一个html页面里试试效果。