KindEditor在Web开发中的应用研究_第1页
KindEditor在Web开发中的应用研究_第2页
KindEditor在Web开发中的应用研究_第3页
KindEditor在Web开发中的应用研究_第4页
KindEditor在Web开发中的应用研究_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

wordKindEditor在Web开发中的应用研究大纲：KindEditor是一套开源的在线HTML编写器，网站开发人员可以用KindEditor把传统的多行文本输入框代替为可视化的富文本输入框，进而让网站用户获取所见即所得编写收效。KindEditor功能齐全，使用简单，拥有很强的可扩展性，并且可以兼容各种主流阅读器。KindEditor可用于动向网站和精选课程开发制作中，利用KindEditor的富媒体性可轻松实现文本编写，视频、音频、图片和附件等资料的上传管理。重点词：KindEditor富文本动向网站精选课程TheApplicationStudyofKindEditorinWebDevelopmentAbstract:KindeditorisasetofopensourceonlineHTMLeditor,webdeveloperscanusethevisualrichtextinputboxtoreplacetraditionalmulti-linetextinputboxbykindeditor.SuchthesiteuserscanobtainaWYSIWYGeditor.Ithascompletefunctions,Itiseasytouse.whatismore,ithasastrongscalabilityandcanadapttoallkindsofbrowsers.Itisusedtodevelopdynamicwebsitesandexcellentcourses.Wecanusetherichmediafeaturesofkindeditortoedittextandmanagevideo,audio,imagesandattachments.Keywords:KindEditorrichtextdynamicwebsitesexcellentcourses0.序言目前，Internet上各种中小型网站如雨后春笋般涌现，这些网站平时都是动向网站，动态网站平时都会有一个简单的网站后台管理系统。后台管理的功能平时有新闻宣布，产品发布和商品增添等。而要方便快捷实现这些功能平时需要一个在线HTML编写器。常用的在线HTML编写器有KindEditor、TinyMCE、FCKEditor、CuteEditor和eWebEditor等。本文以使用最为广泛的KindEditor为例表达在线HTML编写器在网站开发中的应用。KindEditor是一套开源的在线HTML编写器，主要用于让用户在网站上获取所见即所得编写收效，开发人员可以用KindEditor把传统的多行文本输入框（textarea）代替为可视化的富文本输入框[1]。1.KindEditor在网站中的使用要在动向网页（如asp网页）中使用KindEditor在线HTML编写器，需要经过以下几个步骤。1）到/网站下载KindEditor在线HTML编写器。将下载的压缩包解压后如图1所示。KindEditor目前支持asp、jsp、和jsp等动向网页技术，所以可以在这四中动向网页中集成KindEditor在线HTML编写器。图1KindEditor目录结构word在线

2）在动向网页头部（<head>与</head>之间）导入下边代码即可在网页中使用HTML编写器[2]。<linkrel="stylesheet"href="kindeditor/themes/default/default.css"/><linkrel="stylesheet"href="kindeditor/plugins/code/prettify.css"/><scriptcharset="utf-8"src="kindeditor/kindeditor.js"></script><scriptcharset="utf-8"src="kindeditor/lang/zh_CN.js"></script><scriptcharset="utf-8"src="kindeditor/plugins/code/prettify.js"></script><script>KindEditor.ready(function(K){vareditor1=K.create('textarea[name="Description"]',{cssPath:'kindeditor/plugins/code/prettify.css',uploadJson:'kindeditor/asp/upload_json.asp',fileManagerJson:'kindeditor/asp/file_manager_json.asp',allowFileManager:true,afterCreate:function( ){varself=this;K.ctrl(document,13,function( ){self.sync( );K('form[name=example]')[0].submit( );

KindEditor});K.ctrl(self.edit.doc,13,function( ){self.sync( );K('form[name=example]')[0].submit( );});}});prettyPrint( );});</script>3）在网页的表单中设计一个多行文本输入框，注意要将多行文本输入框的

visibility

属性设置为“hidden，”多行文本框代码以下所示

[3]。<textareaname="Description"style="width:700px;height:200px;visibility:hidden;"></textarea>这里需要注意的是多行文本输入框的

name属性值（

Description）应该出现在步骤

2的以下代码行中。vareditor1=K.create('textarea[name="

Description"]',{这样设置的目的就是用本输入框如图2所示。

KindEditor

富文本输入框代替传统多行文本输入框，

传统多行文图2传统多行文本输入框而经过上述设置后的传统多行文本输入框将会变为一个富文本输入框。如图3所示。word图3KindEditor富文本输入框比较图2和图3就可以看出，图3的富文本输入框对照图2的传统多行文本输入框多了很多合用的工具，这些工具可更正文本格式，上传图片、视频和附件等。若是要在办理表单的asp页面获取该KindEditor富文本输入框中的内容，使用以下语句即可：Description=request.form("Description")KindEditor会将图片、视频和附件等资料上传到图1的“attached”目录下相应子目录，经过以上语句获取的内容平时是一段HTML代码，要在Access数据库中储藏这段HTML代码，可以用一个数据种类为“备注”的字段即可。4）图3所显示的在线HTML编写工具可以由用户定制，定制方法比较简单，打开kindeditor根目录下的kindeditor.js文件，找到以下代码段。items:['source','|','undo','redo','|','preview','print','template','code','cut','copy','paste','plainpaste','wordpaste','|','justifyleft','justifycenter','justifyright','justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript','superscript','clearhtml','quickformat','selectall','|','fullscreen','/','formatblock','fontname','fontsize','|','forecolor','hilitecolor','bold','italic','underline','strikethrough','lineheight','removeformat','|','image','flash','media','insertfile','table','hr','emoticons','百度map','pagebreak','anchor','link','unlink','|','about'],用户可以在该代码段中定制在线HTML编写器的工具，只需把不想要的工具删除即可。'/'符号表示换行，其余的工具基本可以做到见名知意。若是将上边代码段删减为以下代码段，items:['justifyleft','justifycenter','justifyright','justifyfull','|','formatblock','fontname','fontsize','|','forecolor','hilitecolor','bold','italic','underline','strikethrough','lineheight','removeformat','|','image','emoticons'],这时获取的富文本输入框的收效如图4所示。图4隐蔽部分工具的KindEditor富文本输入框word图3所展现的富文本输入框平时用于网站后台，由于网站后台管理员平时需要插入flash动画、视频和附件等内容。而图4所展现的富文本输入框平时用于网站前台，网站前台留给用户的功能应该要少一些。平时主若是一些文本格式、图片和表情工具等。若是要在网页中创办两个或更多可视化的富文本输入框，第一创办多个传统多行文本输入框，代码以下：<textareaname="content1"style="width:700px;height:200px;visibility:hidden;"></textarea><textareaname="content2"style="width:700px;height:200px;visibility:hidden;"></textarea>尔后，再对步骤2中的代码做一些更正，更正后的减少代码以下：vareditor1=K.create('textarea[name="content1"]',{省略部分代码});vareditor2=K.create('textarea[name="content2"]',{省略部分代码});以上代码的作用是创办两个

Kindeditor

富文本输入框代替传统多行文本输入框。5）Kindeditor可上传的资源有图片、flash、媒体和其余附件。这些文件的格式在kindeditor中都可以指定，若是还需要上传某些特别格式的文件，可以对kindeditor中指定的文件格式进行更正。别的kindeditor中对上传文件的最大尺寸做了限制，这个限制也可以更正。更正方法比较简单，找到kindeditor根目录下的asp子文件，找到upload_json.asp文件并打开，找到以下代码段。'定义同意上传的文件扩展名imageExtStr="gif|jpg|jpeg|png"flashExtStr="swf|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.结语KindEditor是一套开源的在线HTML扩展性，并且可以兼容各种主流阅读器。

编写器，它功能齐全，使用简单，拥有很强的可KindEditor可广泛用于动向网站和精选课程开发，宣布的信息可以插入视频、音频、图片和附件等资源，所以KindEditor

KindEditor

宣布的信息更加拥有多媒体性。但KindEditor也有少许缺

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论