代码高亮：http://www.cnblogs.com/KTblog/p/5205214.html

效果：

项目结构：

  • Extend：存放各种扩展
  • BlogAction.class.php：博文模块
  • addBlog.html:添加博文页面

Html代码：

只是用一个核心文件也可，也可以加入其他js文件，比如语言包，扩展包。

addBlog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>添加博文</title>

    <link rel="stylesheet" href="__PUBLIC__/Css/Public.css" />

</head>

<body>

    <table class="table">

         //代码省略......
　　　　　//代码省略......
　　　　　//代码省略......

        <tr>

            <td colspan="2" align="center">

                <!-- KindEditor编辑器 Begin -->

                <textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

                <!-- KindEditor编辑器 End -->

            </td>

        </tr>

        <tr>

            <td colspan="2" align="center">

                <!-- <input type="text" value="保存提交" /> -->

                <a href="" id="submit">提交</a>

            </td>

        </tr>

    </table>

    <!-- JQuery CDN Begin -->

    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>

    <!-- JQuery End -->

    <!-- KindEditor编辑器JS Begin -->

    <script charset="utf-8" src="__EXTEND__/KindEditor/kindeditor.js"></script>

    <!-- KindEditor编辑器JS End -->

    <!-- 调用js Begin -->

    <script>

        $(function () {

            //初始化编辑器

            var ed = null;

            KindEditor.ready(function(K) {
　　　　　　　　　//上传操作

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

                    uploadJson : '../Blog/upload',//post提交图片的地址，在后台按照往常的上传函数接受即可。

                });

            });

            //提交事件

            $('#submit').click(function() {

                var content = ed.html();//获取编辑器内容

                alert(content);

            });

        });

    </script>

    <!-- 调用js End -->

</body>

</html>

PHP后台：

  • 此处使用了ThinkPHP的MVC模式搭建项目：
  • 所以传递到这个路径：../Blog/upload,其中 ../ 代表文件所在位置其上的所有目录结构。文件所在目录，看顶部图片。
  • 上传成功或失败，按照注释所给的json格式传递会前台即可。
  • 可以使用加盖水印功能

BlogAction.class.php->upload()

/**

 * 处理上传图片

 * @return [type] [description]

 */

Public function upload() {

    //上传文件

    import('ORG.Net.UploadFile');

    //加盖水印

    import('ORG.Util.Image');

    $upload = new UploadFile();

    $upload->savePath = './App/Uploads/';

    $upload->autoSub = true;

    $upload->subType = 'date';

    $upload->dateFormat = 'Ymd';

    // 返回值：

    // //成功时

    // {

    //         "error" : 0,

    //         "url" : "http://www.example.com/path/to/file.ext"

    // }

    // //失败时

    // {

    //         "error" : 1,

    //         "message" : "错误信息"

    // }

    if ( !$upload->upload() ) {

        echo json_encode(array('error'=>1, $upload->getErrorMsg()));

    } else {

        $UplaodFileInfo = $upload->getUploadFileInfo();

        $imagePath = '/App/Uploads/' . $UplaodFileInfo[0]['savename'];

        //加盖水印

        //地址前面要使用  ./  当前路径

        Image::water('.' . $imagePath, './App/Data/logo.gif');

        echo json_encode(array('error'=>0, 'url'=>$imagePath));

    }

}

KindEditor - 富文本编辑器 - 使用+上传图片的更多相关文章

  1. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  2. (转）淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  3. （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  4. django项目中使用KindEditor富文本编辑器。

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  5. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindedi ...

  6. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  7. vue-quill-editor富文本编辑器，上传图片自定义为借口上传

    vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194

  8. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  9. bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片

    bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片   bootstrap-wysihtml5实际使用内核为ckeditor     故这里修改ckeditor即可 ...

随机推荐

  1. Android百度地图的简单实现

    2015-06-13 最近学习了百度地图API的简单开发,现记录如下:(持续更新中) 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务AP ...

  2. 【C++】基于socket的多线程聊天室（控制台版）

    以前学习socket网络编程和多线程编程的时候写的一个练手程序 聊天室基本功能: 1.用户管理:登录,注册,登出,修改用户名,修改密码 2.聊天室功能:群聊,私聊,获取在线用户列表,获取所有用户列表 ...

  3. IWebBrowser隐藏滚动条

    刚才在项目里看到一个IWebBrowser2,竟然需要通过MoveWindow的方式把滚动条遮挡,如果要缩小IWebBrowser2控件的显示大小呢?这种方法至少我用不习惯,起码也得从源头解决这样的问 ...

  4. java list基本用法

    List<E>([]内的内容可省略),与数组类似: 实例化:List[<数据类型>] list = new ArrayList[<数据类型>](); 获得集合内元素 ...

  5. python笔记之第一次使用（未入门）

    刚开始学习python,之前完全没有接触,在这里写下自己学习python的过程和心得. 首先,安装python,打开官网:http://python.org.点击Download.我选择了3.5.1版 ...

  6. PCIE卡槽还能这样用！

    前几天去电脑城装了台i5的主机,当时就发现主板上只有2个PCIex2的槽.但奇怪的是2个还长的不一样,一个屁股后面是开口的:) 问装机的小伙子,他也不懂,而且就这电脑操作水平都跟哥差远了,让他给我硬盘 ...

  7. oracle复制表数据，复制表结构

    1.不同用户之间的表数据复制 2.同用户表之间的数据复制 3.B.x中个别字段转移到B.y的相同字段 4.只复制表结构 加入了一个永远不可能成立的条件1=2,则此时表示的是只复制表结构,但是不复制表内 ...

  8. 关于js的一些关键知识点(call,apply,callee, caller,clourse,prototypeChain)

    可能不少学习javascript在使用call,apply,callee时会感到困惑,以下希望对于你有所帮助: 1.~~~call ,apply是函数(函数对象)的方法:callee是函数argume ...

  9. char[]转换成wchar_t的转换方法（GNU Libc规定wchar_t为32位）

    wchar_t是C/C++的字符数据类型,是一种扩展的字符存储方式,wchar_t类型主要用在国际化程序的实现中,但它不等同于unicode编码.unicode编码的字符一般以wchar_t类型存储. ...

  10. Hat’s Words（字典树）

    Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...