keditor时一个免费的开源编辑器，很多公司在使用（百度编辑器也不错）。最近为了做一个客户信息管理系统，在发送邮件模块用到这个编辑器，也算学习一下新的东西。

第一步：下载编辑器

到它的官网下载：http://kindeditor.net/down.php

第二步：选择编辑器的样式

　　根据需要，选择合适的样式来用，http://kindeditor.net/demo.php是它的编辑器展示页，展示各种不同样式的效果。

第三步：测试选择的样式

　　下载解压文件，得到如下目录：

　　

　　解压出来的文件解释：

　　attached：显然是附件目录

　　examples：是举例的demo，里面有很多种效果，方便大家使用

　　lang:这个是放语言包的

　　php:放的php demo

　　plugins:放编辑器插件

　　themes：放模版主题

　　其他是一些js文件，我们先不管他，好像也不懂，哈哈哈哈哈哈哈哈。

　　我是直接把编辑器当做插件，放在我网站的根目录的plugins/keditor这个路径，如下图：

　　

　　我这里以默认的样式为例子，代码来自：examples/default.html把所有的代码复制进来，增加了一个input输入框用来放邮件主题，其他都基本没变动：

<!doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <title>发送邮件</title>

    <style>

        form {

            margin: 0;

        }

        textarea {

            display: block;

        }

    </style>

    <link rel="stylesheet" href="plugins/keditor/themes/default/default.css" />

    <script charset="utf-8" src="plugins/keditor/kindeditor-min.js"></script>

    <script charset="utf-8" src="plugins/keditor/lang/zh_CN.js"></script>

    <script>

        var editor;

        KindEditor.ready(function(K) {

            editor = K.create('textarea[name="content"]', {

                allowFileManager : true

            });

            K('input[name=getHtml]').click(function(e) {

                alert(editor.html());

            });

            K('input[name=isEmpty]').click(function(e) {

                alert(editor.isEmpty());

            });

            K('input[name=getText]').click(function(e) {

                alert(editor.text());

            });

            K('input[name=selectedHtml]').click(function(e) {

                alert(editor.selectedHtml());

            });

            K('input[name=setHtml]').click(function(e) {

                editor.html('<h3>Hello KindEditor</h3>');

            });

            K('input[name=setText]').click(function(e) {

                editor.text('<h3>Hello KindEditor</h3>');

            });

            K('input[name=insertHtml]').click(function(e) {

                editor.insertHtml('<strong>插入HTML</strong>');

            });

            K('input[name=appendHtml]').click(function(e) {

                editor.appendHtml('<strong>添加HTML</strong>');

            });

            K('input[name=clear]').click(function(e) {

                editor.html('');

            });

        });

    </script>

</head>

<body>

<h3>默认模式</h3>

<form method="post" action="sendemail.php">

   邮件主题：<input type="text" name="contentTitle"  id="contentTitle">

    <br />

    <br />

    <textarea name="content" style="width:800px;height:400px;visibility:hidden;" id="content"></textarea>

    <p>

        <br />

        <input type="button" name="clear" value="清空内容" />

        <input type="submit" name="pushmail" value="发送邮件" />

    </p>

</form>

</body>

</html>

效果如下：

　　这里需要注意的是：引用的css、js文件因为被我放到plugins/keditor这个路径，所以头文件引用路径要修改下，上面我用红色注释了，各位用的时候要注意。其他好像也没什么难的。好了，一个简单的编辑器使用教程到此结束。

PHP学习笔记：keditor的使用的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. CodeWarrior环境下中断使用

    对于飞思卡尔CodeWarrior的中断使用,一般有3种方法: 1.把#pragma TRAP_PROC放在中断程序前面,并把中断向量表放到*.prm. 例如: #pragma TRAP_PROC v ...

  2. [原创]Android插件化的一种实现

    Android的插件化已经是老生常谈的话题了,插件化的好处有很多:解除代码耦合,插件支持热插拔,静默升级,从根本上解决65K属性和方法的bug等等. 下面给大家介绍一下我们正在用的插件化框架.本片主要 ...

  3. Hadoop学习笔记（老版本，YARN之前），MapReduce任务Namenode DataNode Jobtracker Tasktracker之间的关系

    一.基本概念 在MapReduce中,一个准备提交执行的应用程序称为“作业(job)”,而从一个作业划分出的运行于各个计算节点的工作单元称为“任务(task)”.此外,Hadoop提供的分布式文件系统 ...

  4. oracle中分组排序函数用法 - 转

    项目开发中,我们有时会碰到需要分组排序来解决问题的情况,如:1.要求取出按field1分组后,并在每组中按照field2排序:2.亦或更加要求取出1中已经分组排序好的前多少行的数据 这里通过一张表的示 ...

  5. js 事件捕获与事件冒泡例子

    http://codepen.io/huashiyiqike/pen/qZVdag addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加s ...

  6. 彻底删除mysql方法

    首先,先在服务(开始——>控制面板——>管理工具——>服务)里停掉MySQL的服务.打开控制面板-添加删除程序,找到MySQL,卸载.或者用360安全卫士来卸载也行.也可以用mysq ...

  7. MemCached用法

    所需要的jar包: com.danga.MemCached.MemCachedClient com.danga.MemCached.SockIOPool 自行下载/** * 缓存服务器集群,提供缓存连 ...

  8. POJ 1816 Wild Words

    Wild Words Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4412   Accepted: 1149 Descri ...

  9. 【eoe 6】ActionBar的使用

    一. Action Bar 一般位于屏幕顶部,包括四个可操作区域: 应用图标或LOGO区域,用于视图控制的Spinner下拉菜单或TAB控件区域, Action button(也称为Action It ...

  10. Web API 入门系列- 从一个示例开始

    1.新建Web API项目 2.新建bookModel 3.新建book web api 控制器 为了简单方便,演示系统使用内存集合持久化书籍. 4.测试web api 我们怎么方便测试web api ...