代码高亮: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)); } }