《kindeditor控件实现文本编辑器使用详解(含代码)》由会员分享，可在线阅读，更多相关《kindeditor控件实现文本编辑器使用详解(含代码)（4页珍藏版）》请在金锄头文库上搜索。
1、Kindeditor控件在PHP中使用方法详解1、简介：KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑 效果，开发人员可以用KindEditor把传统的多行文本输入框(textarea)替换为可视化的富 文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等 程序集成，比较适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。 主要特点 ：快速：体积小，加载速度快 开源：开放源代码，高水平，高品质 底层：内置自定义 DOM 类库，精确操作 DOM 扩展：基于插件的设
2、计，所有功能都是插件，可根据需求增减功能 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件 兼容：支持大部分主流浏览器，比如 IE、 Firefox、 Safari、 Chrome、 Opera2、 首先你需要去 kindeditor 官网下载目前最新版本的 kindeditor 文件包， 官网 http:/ 15:48asp. net2013/11/23 15:48文磁attached2013/11/23 15:48文磁examples2013/11/23 15:48环2013/11/23 15:48文磁lang2013/11/23 15:48文磁php2013/11/23 15:4
3、8文磁plugins2013/11/23 15:48文磁.themes2013/11/23 15:48文磁誥 I kindeditor.js2013/11/23 15:48J Seri pt Script 文件163 KB誉kindeditor-all.js2013/11/23 15:48J Script Script 文件311 KB圜 kindeditor-all-rninjs2013/11/23 15:48J Seri pt Script 交件176 KB圜 kindeditor-imini.j&匚写i-丄亠2013/11/23 15:48J Seri pt Script 文件93 KB
4、hcense.txt2013/11/23 15:4827 KE这里面包含有 ASP、 、 JSP、 php 等文件夹，我们这里是在 php 中应用该控件，所以 ASP、、JSP这三个文件夹是可以删除的，当然不删也无所谓4、接下来将所有文件拷贝到你项目的根目录下，如图所示：J 1Z7 01 & 0酋mage酋 images 0 js丿 酋 kind editor色 attached330pppexampleslang-借 Rhp出 plugins-出 themes记得是拷贝到项目根目录下須E诽3）引入5、新建一个test.php页面，r在里面对kindeditor控件进行引用和配置 主要包含三部
5、翁H）（引入tcsis-文件j, 2）定义一个textarea文本框用来显示控件,JavaScript文件，并且在HTML中嵌入一个js函数来调用控件 kinded itor 控件使用 KindEditor.ready function(K) /kindeditor 控件调用var editor1=K.create(textareaname=content,/name=form中 text area 的name 属性cssPath ././kindeditor/plugins/code/prettify.css, uploadJson ././kindeditor/php/upload_jso
6、n.php, fileManagerJson : . . /. . /kindeditor/php/file_manager_json.php ,allowFileManager true, afterCreate function() var self = this;K.ctrl(document, 13function() self.sync();formname=myform)0.subm it();/ name=form 表单的name属性);K.ctrl(self.edit.doc, 13function()self.sync();formname=myform)O.subm it(
7、);/ name=form 表单的name属性);); prettyPrint(););效果图：伺丨町e匕姑風回為疇血质陋11言尋尋臺扌三注童垂叫/塔邀,日H尸tT丨A+ AB I U嫖崇垃| I碑聊S1蚀 =二噩尽$ 榮丨这是kindeditorfe件效果图5、如果你自己向改变控件显示的效果，打开kindeditor文件目录下的themes文件，里面有 一个default.css文件，在里面就可以自己编辑css文件，显示自己需要的效果9W3Kr kr Kr丿 酋 kind editor 酋 attached examples & php色 plugins丿凸themes-凸 common丿
8、default background.pn | 團 default.css default.png-竣qq酋 simple囤 kindeditor-all-minjs 囤 kind&ditor-alljs囤 kind&ditor-rnin.js囤 kind&ditor.jsI | license.txt在相应的位置编辑即可Z-L7416/* ccntdiner */417t1.Jte-container- /*-ffiflttBE-415margin-top:30px;419margin-left:30px;420display: Jblock;421border: Ipx solidCCCC
9、CC;422background-color :423overflow: bidden;424425:-491 ke-edit-textarea /*扌空制背星*/492492 border: 0;493 margin: Opx;494 padding: 0;49-6overflow: auto;497 background:rgba(248227215 7);498 4991- ke-edi t-textared font: 12px/l . 5 rConsolasrf ,rMonaconf HBitstr-eaiH V&ra Sans MonotrCourier Nevr,f Couris501 color: #000;502 overflow:曰口to;resize: none;希望能对你有所帮助
