• 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));
        }
    
    }
  • 相关阅读:
    AS3 CookBook学习整理(四)
    方维分享系统修改瀑布流页面,包括的文件
    PHP 采集淘宝店的评论插件使用说明
    方维系统,在tip.htm和inc\u\u_menu.htm调用账号绑定状态,已绑定的可链接到该用户在对应网站的地址
    php采集淘宝店的评论,php采集淘宝店铺的所有评论的实现
    方维分享系统二次开发,新加一个模块
    方维分享系统,个人中心杂志社显示我的、关注的、推荐的数量
    采集 淘宝店铺的所有评论内容 的思路
    方维分享系统写一个全局函数,能获取用户详情
    方维分享系统 全局变量 $_FANWE 的用处
  • 原文地址:https://www.cnblogs.com/KTblog/p/5196270.html
Copyright © 2020-2023  润新知