2022年KindEditor在Web开发中的应用研究.pdf

《2022年KindEditor在Web开发中的应用研究.pdf》由会员分享，可在线阅读，更多相关《2022年KindEditor在Web开发中的应用研究.pdf（5页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

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

2、ndEditor in Web Development Abstract:Kindeditor is a set of open source online HTML editor, web developers can use the visual rich text input box to replace traditional multi-line text input box by kindeditor.Such the site users can obtain a WYSIWYG editor. It has complete functions, It is easy to u

3、se.what is more, it has a strong scalability and can adapt to all kinds of browsers.It is used to develop dynamic web sites and excellent courses.We can use the rich media features of kindeditor to edit text and manage video, audio, images and attachments. Keywords: KindEditor rich textdynamic web s

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

5、站上获得所见即所得编辑效果，开发人员可以用KindEditor把传统的多行文本输入框（textarea）替换为可视化的富文本输入框1。1.KindEditor在网站中的使用要在动态网页（如asp 网页）中使用KindEditor 在线 HTML编辑器，需要经过以下几个步骤。1）到 http:/ 网站下载KindEditor在线 HTML编辑器。将下载的压缩包解压后如图 1 所示。 KindEditor 目前支持 asp、jsp、 和 jsp 等动态网页技术，因此可以在这四中动态网页中集成KindEditor 在线 HTML 编辑器。图 1 KindEditor目录结构精品资料 - - - 欢迎

6、下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 5 页 - - - - - - - - - - word 2） 在动态网页头部 （与之间）导入下面代码即可在网页中使用KindEditor在线 HTML 编辑器2。 KindEditor.ready(function(K) var editor1 = K.create(textareaname= Description, cssPath : kindeditor/plugins/code/prettify.css, uploadJson : kindeditor/asp/

7、upload_json.asp, fileManagerJson : kindeditor/asp/file_manager_json.asp, allowFileManager : true, afterCreate : function() var self = this; K.ctrl(document, 13, function() self.sync(); K(formname=example)0.submit(); ); K.ctrl(self.edit.doc, 13, function() self.sync(); K(formname=example)0.submit();

8、); ); prettyPrint(); ); 3）在网页的表单中设计一个多行文本输入框，注意要将多行文本输入框的visibility 属性设置为 “hidden”，多行文本框代码如下所示3。 这里需要注意的是多行文本输入框的name 属性值（ Description）应该出现在步骤2 的以下代码行中。var editor1 = K.create(textareaname= Description, 这样设置的目的就是用KindEditor 富文本输入框取代传统多行文本输入框，传统多行文本输入框如图2 所示。图 2 传统多行文本输入框而经过上述设置后的传统多行文本输入框将会变成一个富文本输入框

9、。如图3 所示。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 5 页 - - - - - - - - - - word 图 3 KindEditor 富文本输入框比较图 2 和图 3 就可以看出，图3 的富文本输入框相比图2 的传统多行文本输入框多了很多实用的工具，这些工具可修改文本格式，上传图片、视频和附件等。如果要在处理表单的asp 页面获取该KindEditor富文本输入框中的内容，使用以下语句即可：Description=request.form( Description) Kind

10、Editor 会将图片、视频和附件等资料上传到图1 的“attached”目录下相应子目录，通过以上语句获得的内容通常是一段HTML代码，要在Access 数据库中存储这段HTML代码，可以用一个数据类型为“备注”的字段即可。4）图3 所显示的在线HTML编辑工具可以由用户定制，定制方法比较简单，打开kindeditor 根目录下的kindeditor.js 文件，找到如下代码段。items : source, |, undo, redo, |, preview, print, template, code, cut, copy, paste, plainpaste, wordpaste, |

11、, justifyleft, justifycenter, justifyright, justifyfull, insertorderedlist, insertunorderedlist, indent, outdent, subscript, superscript, clearhtml, quickformat, selectall, |, fullscreen, /, formatblock, fontname, fontsize, |, forecolor, hilitecolor, bold, italic, underline, strikethrough, lineheigh

12、t, removeformat, |, image, flash, media, insertfile, table, hr, emoticons, baidumap, pagebreak, anchor, link, unlink, |, about , 用户可以在该代码段中定制在线HTML 编辑器的工具， 只需把不想要的工具删除即可。/符号表示换行， 其它的工具基本可以做到见名知意。如果将上面代码段删减为以下代码段，items : justifyleft, justifycenter, justifyright,justifyfull, |, formatblock, fontname,

13、fontsize, |, forecolor, hilitecolor, bold, italic, underline, strikethrough, lineheight, removeformat, |, image, emoticons , 这时得到的富文本输入框的效果如图4 所示。图 4 隐藏部分工具的KindEditor 富文本输入框精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 5 页 - - - - - - - - - - word 图 3 所展示的富文本输入框通常用于网站后台

14、，因为网站后台管理员通常需要插入flash动画、 视频和附件等内容。而图 4 所展示的富文本输入框通常用于网站前台，网站前台留给用户的功能应该要少一些。通常主要是一些文本格式、图片和表情工具等。如果要在网页中创建两个或更多可视化的富文本输入框，首先创建多个传统多行文本输入框，代码如下： 然后，再对步骤2 中的代码做一些修改，修改后的缩减代码如下：var editor1 = K.create(textareaname=content1, 省略部分代码); var editor2 = K.create(textareaname=content2, 省略部分代码); 以上代码的作用是创建两个Kind

15、editor 富文本输入框替代传统多行文本输入框。5） Kindeditor 可上传的资源有图片、 flash、 媒体和其它附件。 这些文件的格式在kindeditor中都可以指定，如果还需要上传某些特殊格式的文件，可以对kindeditor 中指定的文件格式进行修改。另外kindeditor 中对上传文件的最大尺寸做了限制，这个限制也可以修改。修改方法比较简单，找到kindeditor 根目录下的asp子文件，找到upload_json.asp 文件并打开，找到如下代码段。定义允许上传的文件扩展名imageExtStr = gif|jpg|jpeg|png flashExtStr = swf

16、|flv mediaExtStr = swf|flv|mp3|wav|wma|wmv|mid|avi|mpg|asf|rm|rmvb fileExtStr = doc|docx|xls|xlsx|ppt|htm|html|txt|zip|rar|gz|bz2 最大文件大小maxSize = 5 * 1024 * 1024 5M 用户可以在这段代码中设定要上传的文件格式和最大文件大小。修改方法比较简单，如果需要在网站中上传bmp 格式的图片，可将第一行代码改为：imageExtStr = gif|jpg|jpeg|png|bmp 其它代码的修改方式基本一致，读者可自行修改。2. 结语KindEd

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

18、ndEditor 是什么？ EB/OLhttp:/ - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 5 页 - - - - - - - - - - word 2 吴代文 ,曹熙斌 . 网站建设与管理基础及实训(PHP版)M, 北京：清华大学出版社,2013. 3 吴代文 ,郭军军 . 网站建设与管理基础及实训(ASP 版)(第二版 )M, 北京：清华大学出版社,2015. 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 5 页 - - - - - - - - - -