今天群里的朋友问我能不能写个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()方法来取值。

好了主要的用法介绍完了,它还有很多不常用功能,我就不说了,多看看例子我相信大家都会用的。

另外还有【kindeditor编辑器使用SyntaxHighlighter实现代码高亮】

详细介绍如何使用kindEditor编辑器的更多相关文章

  1. linux配置网卡IP地址命令详细介绍及一些常用网络配置命令

    linux配置网卡IP地址命令详细介绍及一些常用网络配置命令2010-- 个评论 收藏 我要投稿 Linux命令行下配置IP地址不像图形界面下那么方 便,完全需要我们手动配置,下面就给大家介绍几种配置 ...

  2. 详细介绍如何在win7下首次实现通过Git bash向Github提交项目

    详细介绍如何在win7下首次实现通过Git bash向Github提交项目 引自:http://jingpin.jikexueyuan.com/article/35944.html 作者: wddoe ...

  3. ThinkPHP 的模型使用详细介绍--模型的核心(七)

    原文:ThinkPHP 的模型使用详细介绍--模型的核心(七) 注意:本节是ThinkPhp框架对数据操作的核心处理部分 大家还是在这里看清楚可以将其剪切放到代码编辑器中查看 本章节给大家着重介绍模型 ...

  4. “百度杯”CTF比赛 十二月场_blog(kindeditor编辑器遍历,insert注入,文件包含)

    题目在i春秋的ctf训练营中能找到 首先先是一个用户登录与注册界面,一般有注册界面的都是要先让你注册一波,然后找惊喜的 那我就顺着他的意思去注册一个号 注册了一个123用户登录进来看到有个文本编辑器, ...

  5. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  6. VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别

    在使用VMware Workstation(以下简称:VMware)创建虚拟机的过程中,配置虚拟机的网络连接是非常重要的一环,当我们为虚拟机配置网络连接时,我们可以看到如下图所示的几种网络连接模式:桥 ...

  7. 04-vi使用方法详细介绍

    vi使用方法详细介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版 ...

  8. 【转】VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别

    ☞ 本文主要介绍软件『VMware Workstation(虚拟机)』的相关内容:VMware网络连接模式—桥接.NAT以及仅主机模式的详细介绍和区别. 其下列版本/分支可以参考本文: 全部版本/分支 ...

  9. WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍

    这篇文章主要介绍了WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍,WQL是指Windows管理规范查询语言,需要的朋友可以参考下 WQL就是WMI中的查询语言,WQL的全称是W ...

随机推荐

  1. java总结文章

    java总结文章 原创地址: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),须要转载的,保留下! Thanks Talk is cheap. Show me th ...

  2. Java和C++的不同

    现在一边继续深入C++,一边学习Java,为了学习得更加透彻,不断比较两者之间的不同,以后会慢慢继续增加. 1.在多态的实现上,C++需要利用关键字virtual,而Java不需要,因为在Java中, ...

  3. CodeFirst解决数据迁移问题

    CodeFirst解决数据迁移问题 分类: 数据库 设计模式 c#2013-04-24 17:56 137人阅读 评论(0) 收藏 举报 工程用的MVC + Entity Framework,根据Co ...

  4. css实现ie6以上文字高度未知垂直居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. compass的使用

    compass常用的一些命令 compass create 创建新Compass项目 compass init  为已存在项目添加compass compass clean 移动已生成的文件和缓存 c ...

  6. GridView 和 Access数据库实现数据绑定(asp.net)

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="主页.aspx.cs ...

  7. C#生成Code39(extend)条形码【非条形码字体】

    Code39是条形码的一种.由于编制简单.能够对任意长度的数据进行编码.支持设备广泛等特性而被广泛采用. 能够对任意长度的数据进行编码.其局限在于印刷品的长度和条码阅读器的识别范围. 支持设备广泛.目 ...

  8. C#list泛型集合

    //创建list泛型集合 List<int> ilist = new List<int>(); ilist.Add(); ilist.Add(); ilist.AddRange ...

  9. JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...

  10. Spring整合Quartz实现动态定时器

    一.版本说明 spring3.1以下的版本必须使用quartz1.x系列,3.1以上的版本才支持quartz 2.x,不然会出错. 原因:spring对于quartz的支持实现,org.springf ...