代码高亮：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. Session累计用户数据列表

    OrderForm.html <body>  <center>  <h1 ><font size="20">Order Items& ...

  2. C++对象模型5--多继承下的对象模型

    C++对象模型中加入多继承 从单继承可以知道,派生类中只是扩充了基类的虚函数表.如果是多继承的话,又是如何扩充的? 1)        每个基类都有自己的虚表. 2)        子类的成员函数被放 ...

  3. Android 开发笔记“程序安装包APK的制作”

    资源来源:http://blog.csdn.net/qualcent/article/details/6959547 完成Android项目后,需要将程序打包成APK文件(Android Packag ...

  4. 让程序只运行一个实例(Delphi篇)（三种方法，其中使用全局原子的方法比较有意思）

    Windows 下一个典型的特征就是多任务,我们可以同时打开多个窗口进行操作,也可以同时运行程序的多个实例,比如可以打开许多个资源管理器进行文件的移动复制操作.但有时出于某种考虑(比如安全性),我们要 ...

  5. Ibatis入门基本语法（转） good

    Ibatis入门基本语法 一个项目中在写ibatis中的sql语句时,where user_id in (#user_id_list# ), 运行时总是不行,后来上网查了查,才知道这里不该用#,而应该 ...

  6. JAVA GUI学习 - JMenuBar菜单条、JMenu菜单、JMenuItem菜单项组件学习

    public class MenuBarKnow extends JFrame { JMenuBar jMenuBar; JMenu jMenuFile,jMenuEditor,jMenuAbout; ...

  7. poj 3630 Phone List(字典树)

    题目链接: http://poj.org/problem?id=3630 思路分析: 求在字符串中是否存在某个字符串为另一字符串的前缀: 即对于某个字符串而言,其是否为某个字符串的前缀,或存在某个其先 ...

  8. 柯里化函数之Javascript

    柯里化函数之Javascript 定义 依据定义来说,柯里化就是将一个接收"多个"參数的函数拆分成一个或者很多个接收"单一"參数的函数.定义看起来是比較抽象的. ...

  9. Backbone入门教程

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  10. dedecms的入门使用

    前段时间(其实也很远了)一直在学习dedecms,这里对前段时间的学习做一个总结. dedecms学习网址:http://help.dedecms.com/v53