代码高亮：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. C语言格式化输出，空位补0，空位补空格

    char strTtimeDump[512] = ""; int a = 5; sprintf(strTtimeDump, "%.4d", a); //strT ...

  2. oracle整体知识的大致介绍(1)-概念

    表空间: oracle允许不同类型的数据分开存放,表空间是数据库的逻辑划分. 数据文件: 表空间由同一磁盘上的一个或多个文件组成,这些文件叫做数据文件. 实例: 是存放和控制数据库的软件机制. ora ...

  3. 图中两点间路径为l的数目

    用矩阵G表示图的邻接阵. G2中的元素就是两点间路径为2的路径数,同理G3就是两点间路径为3的路径数目. 并且此结论同样适用于有向图. 甚至,此结论适用于有权图,只是算出来的不再是路径数,而是各条路径 ...

  4. Qt 智能指针学习（7种QT的特有指针）

    从内存泄露开始? 很简单的入门程序,应该比较熟悉吧 ^_^ #include <QApplication> #include <QLabel> int main(int arg ...

  5. BZOJ 1874 取石子游戏 （NIM游戏）

    题解:简单的NIM游戏,直接计算SG函数,至于找先手策略则按字典序异或掉,去除石子后再异或判断,若可行则直接输出. #include <cstdio> const int N=1005; ...

  6. HDU 2852 KiKi's K-Number

    权值线段树 #include <cstdio> #include <cstring> const int N=200000,M=220000; int k,q,x,y,sum[ ...

  7. Sicily-1063

    一．题意 一个员工是另外一个员工的老板必须满足的条件是作为老板的员工的薪水salary必须大于这个员工,而且作为老板的员工的身高height要大于等于这个员工.首先按照薪水的多少从小到大进行排序,然后 ...

  8. xpage 获取 附件

    var db:NotesDatabase=session.getCurrentDatabase(); var doc:NotesDocument=db.getDocumentByUNID('80E21 ...

  9. ActionScript3游戏中的图像编程（连载二十四）

    总文件夹:http://blog.csdn.net/iloveas2014/article/details/38304477 2.1.1 投影样式的制作 点击左側列表的"投影"系列 ...

  10. cordova安装--创建ionic项目

    1.简介ionic ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CS ...