代码高亮：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应用开发提高篇（2）-----文本朗读TTS（TextToSpeech）

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/26/2368696.html 一.概述 TextToSpeech,就是将文本内容转换成语音,在其 ...

  2. Queue(队列)

    队列是一种后进后出的数据结构,下面介绍一下队列中常见的函数: 一.queue 中的 empty 函数 queue<int> q ; q.empty() ;  // 若队列中无元素,返回tr ...

  3. 使用 Sublime Text 3 开发 React

    下载, 安装, 破解就不用说了, 直接进主题: 1, 安装Package Control 默认的Sublime 3中没有Package Control,要进行安装之后才能用这个去安装其他的插件. 简单 ...

  4. dedecms(织梦)自定义表单后台显示不全 自定义模型当中添加自定义字段后在后台添加内容后不显示解决方案

    我们常用dedecms 自定义表单做留言功能.但是偶尔会遇到这样一个问题,就是 在前台提交表单后..后天显示不全.特别是中文字符  都不会显示, 比如下图: 这是因为  如果你织梦是gbk的话那就对了 ...

  5. Linux 系统之Systemd

    子贡问为仁.子曰:“工欲善其事,必先利其器.居是邦也,事其大夫之贤者,友其士之仁者.”——孔子(春秋)<论语·卫灵公> [工欲善其事,必先利其器] 掌握一门技术,知道其发展历程是非常重要的 ...

  6. Push segues can only be used when the.....

    刚刚遇到的两个错误,. 1, Terminating app due to uncaught exception'NSGenericException', reason: 'Push segues c ...

  7. 求1+2+...+n

    题目:求1+2+…+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字以及条件判断语句(A?B:C). 程序很简单,就看想到想不到了.悲剧,我属于后者... 算 ...

  8. C#共享内存实例 附源码

    原文 C#共享内存实例 附源码 网上有C#共享内存类,不过功能太简单了,并且写内存每次都从开头写.故对此进行了改进,并做了个小例子,供需要的人参考. 主要改进点: 通过利用共享内存的一部分空间(以下称 ...

  9. android搭建环境错误 daemon not running. starting it now on port 5037 ADB server didn't ACK

    android搭建环境错误 daemon not running. starting it now on port 5037 ADB server didn't ACK ADB server didn ...

  10. APUE学习之---------------进程

    离职了,交接期也有足够的时间了,可以在好好的再看一下APUE,想想上次详细的看还是在两年之前,虽然中间也偶尔会翻出来看看,但是由于工作上交集相对比较少一直没有去细读一下.现在正好是一段空挡期可以好好看 ...