代码高亮：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. mac的svn之cornerstone简易教程

    链接地址:http://jingyan.baidu.com/article/9989c74612a55af648ecfef2.html 背景: 关于cornerstone的介绍很少: 这里介绍mac的 ...

  2. python列表类型中的陷阱

    在python中对列表使用重复运算符*进行操作时,只是简单的进行了浅复制,内部的结构并没有复制过来,所以下面的例子结果是这样的: >>> lists =[[]]*3 >> ...

  3. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  4. Vim键盘布局

     Vim键盘布局 用Linux的朋友一定会使用到Vim这个文本编辑器,它是由Vi发展而来的编辑器,其具有代码补齐.编译.错误跳转等丰富的功能,非常适合编程.对于修改Linux配置文件它更是你不二的选择 ...

  5. wordpress模板制作第一课

    一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Archive/Category模板 ...

  6. Android平台APK分析工具包androguard的部署使用和原理分析

    原创文章,转载请注明出处,谢谢. Android应用程序分析主要有静态分析和动态分析两种,常见的静态分析工具是Apktool.dex2jar以及jdgui.今天突然主要到Google code上有个叫 ...

  7. C#使用系统的“显示桌面”功能(Shell.Application)

    原文 C#使用系统的“显示桌面”功能(Shell.Application) 在 Windows 系统的 任务栏 上的 快速启动栏 里,通常有一个图标  ,点击这个图标,就会切换到桌面.这个图标实际是一 ...

  8. 在VPS上安裝BT軟體Transmission

    在VPS上安裝BT軟體Transmission   作者: 窮苦人家的小孩 | 2009-12-04 55 Comments   VPS 還能怎玩?! 裝Proxy,裝VPN,這還不夠,我還用來掛種子 ...

  9. live555学习经验链接一

    live555学习经验链接:http://xingyunbaijunwei.blog.163.com/blog/#m=0&t=1&c=fks_084071082087086069082 ...

  10. VS2010 简单实用快捷键

    VS2010 简单实用快捷键 1). Ctrl+H: 替换 2). Ctrl+F: 查找 3). F5: 启动调试 4). CTRL + F7 生成编译 5). Ctrl+F5: 开始执行(不调试) ...