• KindEditor


    代码高亮: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="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));
        }
    
    }
  • 相关阅读:
    多态的理解
    成员变量与实例变量&成员方法与构造方法&构造代码块和静态代码块&静态与非静态&重写与重载的区别
    Java的基本数据类型和基本数据类型之间的转换
    如何使float精确两位小数或多位小数
    Servlet程序的生命周期
    配置axios全局拦截器
    SpringCloud-Sentinel实现服务限流、熔断、降级,整合Nacos实现持久化
    Nginx+Lua OpenResty环境搭建
    Java-线程池面试题
    Rabbitmq死信队列
  • 原文地址:https://www.cnblogs.com/KTblog/p/5196270.html
Copyright © 2020-2023  润新知