PHP学习笔记:keditor的使用

高洛峰
发布: 2016-10-10 09:19:06
原创
1617人浏览过

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

第一步:下载编辑器

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

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

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

立即学习PHP免费学习笔记(深入)”;

1.jpg

第三步:测试选择的样式

  下载解压文件,得到如下目录:

1.jpg

解压出来的文件解释:

  attached:显然是附件目录

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

  lang:这个是放语言包的

  php:放的php demo

  plugins:放编辑器插件

  themes:放模版主题

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

 

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

1.jpg

我这里以默认的样式为例子,代码来自: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>
登录后复制

1.jpg

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

 

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号