KindEditor在网站开发中的应用研究

摘 要： KindEditor是一套开源的在线HTML编辑器，网站开发人员可以用KindEditor把传统的多行文本输入框替换为可视化的富文本输入框，从而让网站用户获得所见即所得编辑效果。KindEditor功能齐全，使用简单，具有很强的可扩展性，而且能够兼容各种主流浏览器。KindEditor可用于动态网站和精品课程开发制作中，利用KindEditor的富媒体性，可轻松实现文本编辑以及视频、音频、图片和附件等资料的上传管理。

关键词： KindEditor； 富文本； 动态网站； 精品课程

中图分类号：TP37 文献标志码：A 文章编号：1006-8228（2015）09-45-02

Study on application of KindEditor in Web site development

Wu Daiwen

（College of Media Engineering， Weinan Normal University， Weinan， Shanxi 714000， China）

Abstract： Kindeditor is an open source online HTML editor， Web developers can use KindEditor to replace the traditional multi-line text input box with the visualized rich text input box， so that the site users get the wysiwyg editing effect. KindEditor features complete， easy to use， with a strong scalability， and can be compatible with all kinds of mainstream browsers. Kindeditor can be used to develop the dynamic Web-sites and the excellent courses， using the rich media features of kindeditor， the text editing and the upload management for video， audio， images and accessories can be easily realized.

Key words： KindEditor； rich text； dynamic Web-sites； excellent courses

0 引言

目前，Internet上各类中小型网站如雨后春笋般涌现，这些网站通常都是动态网站，动态网站通常都会有一个简单的网站后台管理系统。后台管理功能通常有新闻发布，产品发布和商品添加等。而要方便快捷地实现这些功能，通常需要一个在线HTML编辑器。常用的在线HTML编辑器有KindEditor、TinyMCE、FCKEditor、CuteEditor和eWebEditor等。本文以使用最为广泛的KindEditor为例，探讨在線HTML编辑器在网站开发中的应用。

KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用KindEditor把传统的多行文本输入框（textarea）替换为可视化的富文本输入框[1]。

1 KindEditor在网站中的使用

要在动态网页（如asp网页）中使用KindEditor在线HTML编辑器，需要经过以下几个步骤。

⑴ 到http：//kindeditor.net/网站下载KindEditor在线HTML编辑器。将下载的压缩包解压后如图1所示。KindEditor目前支持asp、jsp、asp.net和jsp等动态网页技术，因此可以在这四种动态网页中集成KindEditor在线HTML编辑器。

⑶ 在网页的表单中设计一个多行文本输入框，这里注意要将多行文本输入框的visibility属性设置为“hidden”，多行文本框代码如下[3]：

多行文本输入框的name属性值（Description）应该出现在步骤⑵的以下代码行中。

这样设置的目的是用KindEditor富文本输入框取代传统的多行文本输入框，传统多行文本输入框如图2所示。

经过上述设置后，传统多行文本输入框将会变成一个富文本输入框。如图3所示。

比较图2和图3就可以看出，图3的富文本输入框比图2的传统多行文本输入框多了很多实用的工具，这些工具可修改文本格式，上传图片、视频和附件等。

如果要在处理表单的asp页面获取该KindEditor富文本输入框中的内容，使用以下语句即可：

Description=request.form（"Description"）

KindEditor会将图片、视频和附件等资料上传到图1的“attached”目录下相应子目录，通过以上语句获得的内容通常是一段HTML代码，要在Access数据库中存储这段HTML代码，可以用一个数据类型为“备注”的字段即可。

⑷ 图3所显示的在线HTML编辑工具可以由用户定制，定制方法比较简单，打开kindeditor根目录下的kindeditor.js文件，找到如下代码段。

用户可以在该代码段中定制在线HTML编辑器的工具，只需把不想要的工具删除即可。'/'符号表示换行，其他工具基本可以做到见名知意。如果将上面代码段删减为以下代码段，则得到的富文本输入框的效果如图4所示。

图3所展示的富文本输入框通常用于网站后台，因为网站后台管理员通常需要插入flash动画、视频和附件等内容。图4所展示的富文本输入框通常用于网站前台，网站前台留给用户的功能应该要少一些。通常主要是一些文本格式、图片和表情工具等。

如果要在网页中创建两个或多个可视化的富文本输入框，首先创建多个传统多行文本输入框，代码如下：

以上代码的作用是创建两个Kindeditor富文本输入框替代传统多行文本输入框。

⑸ Kindeditor可上传的资源有图片、flash、媒体和其他附件。这些文件的格式在kindeditor中都可以指定，如果还需要上传某些特殊格式的文件，可以对kindeditor中指定的文件格式进行修改。另外，kindeditor中对上传文件的最大尺寸做了限制，这个限制也可以修改。修改方法比较简单，找到kindeditor根目录下的asp子文件，找到upload_json.asp文件并打开，找到如下代码段。

用户可以在这段代码中设定要上传的文件格式和最大文件大小。修改方法比较简单，如果需要在网站中上传bmp格式的图片，可将第一行代码改为：

imageExtStr="gif|jpg|jpeg|png|bmp"

其他代码的修改方式与此基本一致，读者可自行修改。

2 结束语

KindEditor是一套开源的在线HTML编辑器，它功能齐全，使用简单，具有很强的可扩展性，而且能够兼容各种主流浏览器。KindEditor可广泛用于动态网站和精品课程开发， KindEditor发布的信息可以插入視频、音频、图片和附件等资源，因此KindEditor发布的信息更加具有多媒体性。但KindEditor也有一些缺陷，比如KindEditor发布的多媒体信息在删除后，信息中包含的视频、音频、图片和附件等资源没有同时被删除，仍然留在服务器中。这些没有被删除的资源会白白浪费服务器存储空间并影响网站访问速度。这是KindEditor下一步应该继续修改和完善的地方。

参考文献：

[1] KindEditor是什么？[EB/OL]http：//kindeditor.net/about.php.

[2] 吴代文，曹熙斌.网站建设与管理基础及实训（PHP版）[M].清华大学出版社，2013.

[3] 吴代文，郭军军.网站建设与管理基础及实训（ASP版）（第二版）[M].清华大学出版社，2015.