PHP学习笔记：keditor的使用-php手册-PHP中文网

PHP学习笔记：keditor的使用

php中文网

发布： 2016-10-10 11:40:51

原创

1508人浏览过

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

第一步：下载编辑器

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

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

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

立即学习“PHP免费学习笔记（深入）”；

第三步：测试选择的样式

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

　　解压出来的文件解释：

　　attached：显然是附件目录

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

　　lang:这个是放语言包的

　　php:放的php demo

　　plugins:放编辑器插件

　　themes：放模版主题

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

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

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

<span style="font-size: 18px;"><!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>发送邮件</title>
    <style><span style="color: #000000;">
        form {
            margin</span>: 0<span style="color: #000000;">;
        }
        textarea {
            display</span>:<span style="color: #000000;"> block;
        }
    </span></style>
    <link rel="stylesheet" href="<span style="color: #ff0000;">plugins/keditor/</span>themes/default/default.css" />
    <script charset="utf-8" src="<span style="color: #ff0000;">plugins/keditor/</span>kindeditor-min.js"></script>
    <script charset="utf-8" src="<span style="color: #ff0000;">plugins/keditor/</span>lang/zh_CN.js"></script>
    <script>
        <span style="color: #0000ff;">var</span><span style="color: #000000;"> editor;
        KindEditor</span>.ready(<span style="color: #0000ff;">function</span><span style="color: #000000;">(K) {
            editor </span>= K.create('textarea[name="content"]',<span style="color: #000000;"> {
                allowFileManager </span>: <span style="color: #0000ff;">true</span><span style="color: #000000;">
            });
            K(</span>'input[name=getHtml]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                alert(editor</span>.<span style="color: #000000;">html());
            });
            K(</span>'input[name=isEmpty]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                alert(editor</span>.<span style="color: #000000;">isEmpty());
            });
            K(</span>'input[name=getText]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                alert(editor</span>.<span style="color: #000000;">text());
            });
            K(</span>'input[name=selectedHtml]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                alert(editor</span>.<span style="color: #000000;">selectedHtml());
            });
            K(</span>'input[name=setHtml]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                editor</span>.html('<h3>Hello KindEditor</h3>'<span style="color: #000000;">);
            });
            K(</span>'input[name=setText]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                editor</span>.text('<h3>Hello KindEditor</h3>'<span style="color: #000000;">);
            });
            K(</span>'input[name=insertHtml]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                editor</span>.insertHtml('<strong>插入HTML</strong>'<span style="color: #000000;">);
            });
            K(</span>'input[name=appendHtml]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                editor</span>.appendHtml('<strong>添加HTML</strong>'<span style="color: #000000;">);
            });
            K(</span>'input[name=clear]').click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                editor</span>.html(''<span style="color: #000000;">);
            });
        });
    </span></script>
</head>
<body>
<h3>默认模式</h3>
<form method="post" action="sendemail.php"><span style="color: #000000;">
   邮件主题：</span><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></span>

登录后复制

效果如下：