详细介绍如何使用kindEditor编辑器
今天群里的朋友问我能不能写个kindEditor编辑器的使用教程,说是弄了半天没有搞定。由于PHP啦后台正好用了这个编辑器,我有写经验,正好教他的同时写出来分享给大家。
kindEditor编辑器是一个由JS写成的在线编辑器,很多网站或CMS等都有用它,口碑不错,目前最新版本是4.1.10。
其实它的用法非常简单,我是在下载了它的安装包后看了一些demo然后就把它放到PHP啦的后台上去了。好了教程正式开始
一、下载
下载最新版本的kindEditor(官方网站kindeditor.net),下载后打开examples/index.html 就可以看到一排例子。
二、部署
将解压后的文件包kindeditor-4.1.10里的asp asp.net jsp php这几个带有服务端脚本的文件夹删除,然后上传到你网站的相应目录中,在这里我假设放到了plugin目录。
三、嵌入
在需要加入编辑器的页面的HTML中倒入
1 |
< link rel = "stylesheet" href = "/plugin/kindeditor-4.1.10/themes/default/default.css" /> |
2 |
< script charset = "utf-8" src = "/plugin/kindeditor-4.1.10/kindeditor-min.js" ></ script > |
3 |
< script charset = "utf-8" src = "/plugin/kindeditor-4.1.10/lang/zh_CN.js" ></ script > |
然后添加一个输入框
1 |
< textarea id = "editor_id" name = "content" ></ textarea > |
最后在加入一段JS
1 |
KindEditor.ready( function (K) { |
2 |
window.editor = K.create( '#editor_id' ,{ |
3 |
cssPath: '/public/plugin/editor/plugins/code/prettify.css' , |
4 |
uploadJson: '/upload/image.php' , |
5 |
resizeType :1, |
6 |
allowPreviewEmoticons : true , |
7 |
allowImageUpload : true , |
8 |
}); |
9 |
}); |
好了。到这里你应该已经可以看页面上的编辑器了。
这里我还要说的一点是 K.create的第一个参数就是前面textarea的ID,后面跟的JSON格式的数据保护了该编辑器的很多功能。比如我代码上写的
cssPath是代码样式表,uploadJson是编辑器的图片上传组件的上传地址。
说到上传地址,大家应该还记的在上传服务器之前我叫大家先删掉的几个文件夹吧,选择你的网站的开发语言的目录你可以看到如PHP目录下的upload_json.php文件,它里面主要写了接受图片上传的方法,大家可以改改自己用。后台部分的东西这里就不细讲了。
四、取值
编辑器嵌入完成后我们如何取值呢?其实它的包里也有例字,那就是 用editor.html()方法来取值。
好了主要的用法介绍完了,它还有很多不常用功能,我就不说了,多看看例子我相信大家都会用的。
最新文章
- Oracle函数-DECODE
- 【CCCC天梯赛决赛】
- 【BZOJ-2400】Spoj839Optimal Marks 最小割 + DFS
- 【freemaker】之获取xml的值
- Dynamic CRM 2013学习笔记(三)快速创建实体 EntityCreater
- iOS - Block		代码块
- Codeforces Round #151 (Div. 2)
- std::vector<;Channel2*>; m_allChannels;容器,以及如何根据channelid的意义
- 5.MVC框架开发(强类型开发,控制器向界面传递数据的几种方法)
- wamp配置
- js获取浏览器滚动条距离顶端的距离
- 读书笔记 effective c++ Item 22 将数据成员声明成private
- 说说API的防重放机制
- dotnet core 2.0在ubuntu下安装失败
- zk个人入门学习总结(1)
- 众说纷纭的ul、ol、li
- 基于redis的分布式锁(转)
- 表table
- Windows环境下在IDEA编辑器中spark开发安装步骤
- poj-2513(字典树+欧拉通路)