1、把百度编辑器放到项目的Public目录下 命名为:UEditor
2、在ThinkPHP/Library/Think/Template/Taglib 目录下编辑 Html.class.php 加上下面的代码:
public function _editor($tag,$content) { $id = !empty($tag['id'])?$tag['id']: '_editor'; $name = $tag['name']; $style = !empty($tag['style'])?$tag['style']:''; $width = !empty($tag['width'])?$tag['width']: '100%'; $height = !empty($tag['height'])?$tag['height'] :'320px'; // $content = $tag['content']; $type = $tag['type'] ; switch(strtoupper($type)) { case 'FCKEDITOR': $parseStr = '<!-- 编辑器调用开始 --><script type="text/javascript" src="__ROOT__/Public/Js/FCKeditor/fckeditor.js"></script><textarea id="'.$id.'" name="'.$name.'">'.$content.'</textarea><script type="text/javascript"> var oFCKeditor = new FCKeditor( "'.$id.'","'.$width.'","'.$height.'" ) ; oFCKeditor.BasePath = "__ROOT__/Public/Js/FCKeditor/" ; oFCKeditor.ReplaceTextarea() ;function resetEditor(){setContents("'.$id.'",document.getElementById("'.$id.'").value)}; function saveEditor(){document.getElementById("'.$id.'").value = getContents("'.$id.'");} function InsertHTML(html){ var oEditor = FCKeditorAPI.GetInstance("'.$id.'") ;if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml(html) ;}else alert( "FCK必须处于WYSIWYG模式!" ) ;}</script> <!-- 编辑器调用结束 -->'; break; case 'FCKMINI': $parseStr = '<!-- 编辑器调用开始 --><script type="text/javascript" src="__ROOT__/Public/Js/FCKMini/fckeditor.js"></script><textarea id="'.$id.'" name="'.$name.'">'.$content.'</textarea><script type="text/javascript"> var oFCKeditor = new FCKeditor( "'.$id.'","'.$width.'","'.$height.'" ) ; oFCKeditor.BasePath = "__ROOT__/Public/Js/FCKMini/" ; oFCKeditor.ReplaceTextarea() ;function resetEditor(){setContents("'.$id.'",document.getElementById("'.$id.'").value)}; function saveEditor(){document.getElementById("'.$id.'").value = getContents("'.$id.'");} function InsertHTML(html){ var oEditor = FCKeditorAPI.GetInstance("'.$id.'") ;if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml(html) ;}else alert( "FCK必须处于WYSIWYG模式!" ) ;}</script> <!-- 编辑器调用结束 -->'; break; case 'EWEBEDITOR': $parseStr = "<!-- 编辑器调用开始 --><script type='text/javascript' src='__ROOT__/Public/Js/eWebEditor/js/edit.js'></script><input type='hidden' id='{$id}' name='{$name}' value='{$conent}'><iframe src='__ROOT__/Public/Js/eWebEditor/ewebeditor.htm?id={$name}' frameborder=0 scrolling=no width='{$width}' height='{$height}'></iframe><script type='text/javascript'>function saveEditor(){document.getElementById('{$id}').value = getHTML();} </script><!-- 编辑器调用结束 -->"; break; case 'NETEASE': $parseStr = '<!-- 编辑器调用开始 --><textarea id="'.$id.'" name="'.$name.'" style="display:none">'.$content.'</textarea><iframe ID="Editor" name="Editor" src="__ROOT__/Public/Js/HtmlEditor/index.html?ID='.$name.'" frameBorder="0" marginHeight="0" marginWidth="0" scrolling="No" style="height:'.$height.';width:'.$width.'"></iframe><!-- 编辑器调用结束 -->'; break; case 'UBB': $parseStr = '<script type="text/javascript" src="__ROOT__/Public/Js/UbbEditor.js"></script><div style="padding:1px;width:'.$width.';border:1px solid silver;float:left;"><script LANGUAGE="JavaScript"> showTool(); </script></div><div><TEXTAREA id="UBBEditor" name="'.$name.'" style="clear:both;float:none;width:'.$width.';height:'.$height.'" >'.$content.'</TEXTAREA></div><div style="padding:1px;width:'.$width.';border:1px solid silver;float:left;"><script LANGUAGE="JavaScript">showEmot(); </script></div>'; break; case 'KINDEDITOR': $parseStr = '<script type="text/javascript" src="__ROOT__/Public/Js/KindEditor/kindeditor.js"></script><script type="text/javascript"> KE.show({ id : \''.$id.'\' ,urlType : "absolute"});</script><textarea id="'.$id.'" style="'.$style.'" name="'.$name.'" >'.$content.'</textarea>'; break; case 'UEDITOR': $parseStr = "\n".'<script type="text/javascript" charset="utf-8" src="__ROOT__/Public/UEditor/ueditor.config.js"></script>'."\n".'<script type="text/javascript" charset="utf-8" src="__ROOT__/Public/UEditor/ueditor.all.js"></script>'."\n".'<script type="text/plain" id="'.$id.'" name="'.$name.'" style="'.$style.'">'.$content.'</script>'."\n".'<script type="text/javascript">var ue_'.$id.' = UE.getEditor("'.$id.'");</script>'."\n"; break; case 'UEDITORMULTI': $parseStr = "\n".'<script type="text/plain" id="'.$id.'" name="'.$name.'" style="'.$style.'">'.$content.'</script>'."\n".'<script type="text/javascript">var editor_'.$id.' = new baidu.editor.ui.Editor();editor_'.$id.'.render("'.$id.'");</script>'."\n"; break; case 'MINI': $parseStr = "\n".'<script type="text/javascript" charset="utf-8" src="__ROOT__/Public/UEditor/ueditor.config.js"></script>'."\n".'<script type="text/javascript" charset="utf-8" src="__ROOT__/Public/UEditor/ueditor.all.js"></script>'."\n".'<link rel="stylesheet" type="text/css" href="__ROOT__/Public/UEditor/themes/default/css/ueditor.css"/>'."\n".'<textarea id="'.$id.'" name="'.$name.'" style="'.$style.'">'.$content.'</textarea>'."\n".'<script type="text/javascript">var editorOption = {minFrameHeight:175,toolbars:[[\'Undo\', \'Redo\',\'|\', \'bold\', \'italic\', \'underline\',\'forecolor\',\'backcolor\',\'fontfamily\',\'fontsize\' ]],autoClearinitialContent:true,wordCount:false, elementPathEnabled:false};var editor_'.$id.' = new baidu.editor.ui.Editor(editorOption);editor_'.$id.'.render("'.$id.'");</script>'."\n"; break; case 'MINIMULTI': $parseStr = "\n".'<link rel="stylesheet" type="text/css" href="__ROOT__/Public/UEditor/themes/default/css/ueditor.css"/>'."\n".'<textarea id="'.$id.'" name="'.$name.'" style="'.$style.'">'.$content.'</textarea>'."\n".'<script type="text/javascript">var editorOption = {minFrameHeight:200,toolbars:[[\'Undo\', \'Redo\',\'|\', \'bold\', \'italic\', \'underline\',\'forecolor\',\'backcolor\',\'fontfamily\',\'fontsize\' ]],autoClearinitialContent:false,wordCount:false, elementPathEnabled:false};var editor_'.$id.' = new baidu.editor.ui.Editor(editorOption);editor_'.$id.'.render("'.$id.'");</script>'."\n"; break; default : $parseStr = '<textarea id="'.$id.'" style="'.$style.'" name="'.$name.'" >'.$content.'</textarea>'; } return $parseStr; }
3、在需要用到编辑器的模板head内加上:
<taglib name="html" />
4、在用到编辑器的地方加上:
<html:editor id="info" name="info" type="UEDITOR" style="width:660px;height:240px;">{$info.info}</html:editor>
在百度编辑器目录的ueditor.config.js文件内修改:
// 服务器统一请求接口路径 , serverUrl: URL + "../../index.php/Home/Index/ueditup"
5、就是你需要的用TP自带上传类处理上传了,在Home模块的Index控制器里加上下面的方法:
public function ueditup(){ header("Content-Type: text/html; charset=utf-8"); $editconfig = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents(COMMON_PATH."Conf/ueditconfig.json")), true); //dump($editconfig); $action = I('get.action'); //echo $action; switch ($action) { case 'config': $result = json_encode($editconfig); break; /* 上传图片 */ case 'uploadp_w_picpath': $result = $this->editup('img'); break; /* 上传涂鸦 */ case 'uploadscrawl': $result = $this->editup('img'); break; case 'uploadvideo': $result = $this->editup('video'); break; case 'uploadfile': $result = $this->editup('file'); //$result = include("action_upload.php"); break; /* 列出图片 */ case 'listp_w_picpath': $result = $this->editlist('listimg'); break; /* 列出文件 */ case 'listfile': $result = $this->editlist('listfile'); break; /* 抓取远程文件 */ case 'catchp_w_picpath': //$result = include("action_crawler.php"); break; default: $result = json_encode(array( 'state'=> '请求地址出错' )); break; } /* 输出结果 */ if (isset($_GET["callback"])) { if (preg_match("/^[\w_]+$/", $_GET["callback"])) { echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')'; } else { echo json_encode(array( 'state'=> 'callback参数不合法' )); } } else { echo $result; } } public function editup($uptype){ if($this->islogin==false){ $_re_data['state'] = '请登陆'; return json_encode($_re_data); } $editconfig = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents(COMMON_PATH."Conf/ueditconfig.json")), true); switch ($uptype) { case 'img': $upload = new \Think\Upload();// 实例化上传类 $upload->rootPath = '.'; $upload->maxSize = $editconfig['p_w_picpathMaxSize']; $upload->exts = explode('.', trim(join('',$editconfig['p_w_picpathAllowFiles']),'.')); $upload->savePath = $editconfig['p_w_picpathPathFormat']; $upload->saveName = time().rand(100000,999999); $info = $upload->uploadOne($_FILES[$editconfig['p_w_picpathFieldName']]); break; case 'file': $upload = new \Think\Upload();// 实例化上传类 $upload->rootPath = '.'; $upload->maxSize = $editconfig['fileMaxSize']; $upload->exts = explode('.', trim(join('',$editconfig['fileAllowFiles']),'.')); $upload->savePath = $editconfig['filePathFormat']; $upload->saveName = time().rand(100000,999999); $info = $upload->uploadOne($_FILES[$editconfig['fileFieldName']]); break; case 'video': $upload = new \Think\Upload();// 实例化上传类 $upload->rootPath = '.'; $upload->maxSize = $editconfig['videoMaxSize']; $upload->exts = explode('.', trim(join('',$editconfig['videoAllowFiles']),'.')); $upload->savePath = $editconfig['videoPathFormat']; $upload->saveName = time().rand(100000,999999); $info = $upload->uploadOne($_FILES[$editconfig['videoFieldName']]); break; default: return false; break; } if(!$info) {// 上传错误提示错误信息 $_re_data['state'] = $upload->getError(); $_re_data['url'] = ''; $_re_data['title'] = ''; $_re_data['original'] = ''; $_re_data['type'] = ''; $_re_data['size'] = ''; }else{// 上传成功 获取上传文件信息 $_re_data['state'] = 'SUCCESS'; $_re_data['url'] = $info['savepath'].$info['savename']; $_re_data['title'] = $info['savename']; $_re_data['original'] = $info['name']; $_re_data['type'] = '.'.$info['ext']; $_re_data['size'] = $info['size']; } return json_encode($_re_data); } public function editlist($listtype){ $editconfig = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents(COMMON_PATH."Conf/ueditconfig.json")), true); switch ($listtype) { case 'listimg': $allowFiles = $editconfig['p_w_picpathManagerAllowFiles']; $listSize = $editconfig['p_w_picpathManagerListSize']; $path = $editconfig['p_w_picpathManagerListPath']; break; case 'listfile': $allowFiles = $editconfig['fileManagerAllowFiles']; $listSize = $editconfig['fileManagerListSize']; $path = $editconfig['fileManagerListPath']; break; default: return false; break; } /* 获取参数 */ $size = isset($_GET['size']) ? htmlspecialchars($_GET['size']) : $listSize; $start = isset($_GET['start']) ? htmlspecialchars($_GET['start']) : 0; $end = $start + $size; /* 获取文件列表 */ $path = $_SERVER['DOCUMENT_ROOT'] . (substr($path, 0, 1) == "/" ? "":"/") . $path; $files = $this->getfiles($path, $allowFiles); if (!count($files)) { return json_encode(array( "state" => "no match file", "list" => array(), "start" => $start, "total" => count($files) )); } /* 获取指定范围的列表 */ $len = count($files); for ($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--){ $list[] = $files[$i]; } //倒序 //for ($i = $end, $list = array(); $i < $len && $i < $end; $i++){ // $list[] = $files[$i]; //} /* 返回数据 */ $result = json_encode(array( "state" => "SUCCESS", "list" => $list, "start" => $start, "total" => count($files) )); return $result; } /** * 遍历获取目录下的指定类型的文件 * @param $path * @param array $files * @return array */ public function getfiles($path, $allowFiles, &$files = array()) { if (!is_dir($path)) return null; if(substr($path, strlen($path) - 1) != '/') $path .= '/'; $handle = opendir($path); while (false !== ($file = readdir($handle))) { if ($file != '.' && $file != '..') { $path2 = $path . $file; if (is_dir($path2)) { $this->getfiles($path2, $allowFiles, $files); } else { if(in_array('.'.pathinfo($file, PATHINFO_EXTENSION), $allowFiles)){ $files[] = array( 'url'=> substr($path2, strlen($_SERVER['DOCUMENT_ROOT'])), 'mtime'=> filemtime($path2) ); } } } } return $files; }
记得把 ueditconfig.json这个文件放到配置文件目录下也就是Home/Conf/这个目录下
这个文件的内容如下:
/* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "p_w_picpathActionName": "uploadp_w_picpath", /* 执行上传图片的action名称 */ "p_w_picpathFieldName": "upfile", /* 提交的图片表单名称 */ "p_w_picpathMaxSize": 2048000, /* 上传大小限制,单位B */ "p_w_picpathAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "p_w_picpathCompressEnable": true, /* 是否压缩图片,默认是true */ "p_w_picpathCompressBorder": 1600, /* 图片压缩最长边限制 */ "p_w_picpathInsertAlign": "none", /* 插入的图片浮动方式 */ "p_w_picpathUrlPrefix": "", /* 图片访问路径前缀 */ /* "p_w_picpathPathFormat": "/Uploads/editor/p_w_picpath/{time}{rand:6}", */ "p_w_picpathPathFormat": "/Uploads/editor/p_w_picpath/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ /* 涂鸦图片上传配置项 */ "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */ "scrawlFieldName": "upfile", /* 提交的图片表单名称 */ "scrawlPathFormat": "/Uploads/editor/p_w_picpath/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "scrawlMaxSize": 2048000, /* 上传大小限制,单位B */ "scrawlUrlPrefix": "", /* 图片访问路径前缀 */ "scrawlInsertAlign": "none", /* 截图工具上传 */ "snapscreenActionName": "uploadp_w_picpath", /* 执行上传截图的action名称 */ "snapscreenPathFormat": "/Uploads/editor/p_w_picpath/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */ "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */ /* 抓取远程图片配置 */ "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchp_w_picpath", /* 执行抓取远程图片的action名称 */ "catcherFieldName": "source", /* 提交的图片列表表单名称 */ "catcherPathFormat": "/Uploads/editor/p_w_picpath/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "catcherUrlPrefix": "", /* 图片访问路径前缀 */ "catcherMaxSize": 2048000, /* 上传大小限制,单位B */ "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */ /* 上传视频配置 */ "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */ "videoFieldName": "upfile", /* 提交的视频表单名称 */ "videoPathFormat": "/Uploads/editor/video/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "videoUrlPrefix": "", /* 视频访问路径前缀 */ "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */ "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */ /* 上传文件配置 */ "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */ "fileFieldName": "upfile", /* 提交的文件表单名称 */ "filePathFormat": "/Uploads/editor/file/", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "fileUrlPrefix": "", /* 文件访问路径前缀 */ "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */ "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], /* 上传文件格式显示 */ /* 列出指定目录下的图片 */ "p_w_picpathManagerActionName": "listp_w_picpath", /* 执行图片管理的action名称 */ "p_w_picpathManagerListPath": "/Uploads/editor/p_w_picpath/", /* 指定要列出图片的目录 */ "p_w_picpathManagerListSize": 1000, /* 每次列出文件数量 */ "p_w_picpathManagerUrlPrefix": "", /* 图片访问路径前缀 */ "p_w_picpathManagerInsertAlign": "none", /* 插入的图片浮动方式 */ "p_w_picpathManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */ /* 列出指定目录下的文件 */ "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */ "fileManagerListPath": "/Uploads/editor/file/", /* 指定要列出文件的目录 */ "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */ "fileManagerListSize": 1000, /* 每次列出文件数量 */ "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] /* 列出的文件类型 */ }
转载于:https://blog.51cto.com/unics/1852229