安装xheditor
去官网下载一个安装包(有详细的安装办法),简单说就是把xheditor_emot,xheditor_lang,xheditor_plugins,xheditor_skin四个文件夹放到你的js目录下,把xheditor.js也要放在js文件夹下
但是,图片那里点上传没反应,或者是没有上传按钮,那么怎么实现上传图片的功能呢?
1.首先,我们在要使用编辑器的模版中,引用jQuery和xheditor的文件
<script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>
<!-- 编辑器的JS -->
<script src="{{asset('lib/js/xheditor.js')}}"></script>
<script src="{{asset('lib/js/xheditor_lang/zh-cn.js')}}"></script>
2.然后写在public下创建upload.php文件
<?php
/*!
* upload demo for php
* @requires xhEditor
*
* @author Yanis.Wang<yanis.wang@gmail.com>
* @site http://xheditor.com/
* @licence LGPL(http://www.opensource.org/licenses/lgpl-license.php)
*
* @Version: 0.9.6 (build 111027)
*
* 注1:本程序仅为演示用,请您务必根据自己需求进行相应修改,或者重开发
* 注2:本程序特别针对HTML5上传,加入了特殊处理
*/
header('Content-Type: text/html; charset=UTF-8');
$inputName='filedata';//表单文件域name
$attachDir='lib/uploads';//上传文件保存路径,结尾不要带/
$editorShow='<span style="font-family: Arial, Helvetica, sans-serif;">http://localhost:8000/</span>'; //你的服务器网址,本地就用'http://localhost:8000/'
$dirType=1;//1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存
$maxAttachSize=2097152;//最大上传大小,默认是2M
$upExt='jpg,jpeg,gif,png';//上传扩展名
$msgType=1;//返回上传参数的格式:1,只返回url,2,返回参数数组
$immediate=isset($_GET['immediate'])?$_GET['immediate']:0;//立即上传模式,仅为演示用
ini_set('date.timezone','Asia/Shanghai');//时区
$err = "";
$msg = "''";
$tempPath=$attachDir.'/'.date("YmdHis").mt_rand(10000,99999).'.tmp';
$localName='';
if(isset($_SERVER['HTTP_CONTENT_DISPOSITION'])&&preg_match('/attachment;\s+name="(.+?)";\s+filename="(.+?)"/i',$_SERVER['HTTP_CONTENT_DISPOSITION'],$info)){//HTML5上传
file_put_contents($tempPath,file_get_contents("php://input"));
$localName=urldecode($info[2]);
}
else{//标准表单式上传
$upfile=@$_FILES[$inputName];
if(!isset($upfile))$err='文件域的name错误';
elseif(!empty($upfile['error'])){
switch($upfile['error'])
{
case '1':
$err = '文件大小超过了php.ini定义的upload_max_filesize值';
break;
case '2':
$err = '文件大小超过了HTML定义的MAX_FILE_SIZE值';
break;
case '3':
$err = '文件上传不完全';
break;
case '4':
$err = '无文件上传';
break;
case '6':
$err = '缺少临时文件夹';
break;
case '7':
$err = '写文件失败';
break;
case '8':
$err = '上传被其它扩展中断';
break;
case '999':
default:
$err = '无有效错误代码';
}
}
elseif(empty($upfile['tmp_name']) || $upfile['tmp_name'] == 'none')$err = '无文件上传';
else{
move_uploaded_file($upfile['tmp_name'],$tempPath);
$localName=$upfile['name'];
}
}
if($err==''){
$fileInfo=pathinfo($localName);
$extension=$fileInfo['extension'];
if(preg_match('/^('.str_replace(',','|',$upExt).')$/i',$extension))
{
$bytes=filesize($tempPath);
if($bytes > $maxAttachSize)$err='请不要上传大小超过'.formatBytes($maxAttachSize).'的文件';
else
{
switch($dirType)
{
case 1: $attachSubDir = 'day_'.date('ymd'); break;
case 2: $attachSubDir = 'month_'.date('ym'); break;
case 3: $attachSubDir = 'ext_'.$extension; break;
}
$attachDir = $attachDir.'/'.$attachSubDir;
if(!is_dir($attachDir))
{
@mkdir($attachDir, 0777);
@fclose(fopen($attachDir.'/index.htm', 'w'));
}
PHP_VERSION < '4.2.0' && mt_srand((double)microtime() * 1000000);
$newFilename=date("YmdHis").mt_rand(1000,9999).'.'.$extension;
// 图片的路径
$targetPath = $attachDir.'/'.$newFilename;
rename($tempPath,$targetPath);
@chmod($targetPath,0755);
$targetPath=jsonString($targetPath);
if($immediate=='1')$targetPath='!'.$targetPath;
$editorShow=$editorShow.$targetPath;
if($msgType==1)$msg="'$editorShow'";//这里是要在编辑器里生成的图片路径
else $msg="{'url':'".$editorShow."','localname':'".jsonString($localName)."','id':'1'}";//id参数固定不变,仅供演示,实际项目中可以是数据库ID
}
}
else $err='上传文件扩展名必需为:'.$upExt;
@unlink($tempPath);
}
echo "{'err':'".jsonString($err)."','msg':".$msg."}";
function jsonString($str)
{
return preg_replace("/([\\\\\/'])/",'\\\$1',$str);
}
function formatBytes($bytes) {
if($bytes >= 1073741824) {
$bytes = round($bytes / 1073741824 * 100) / 100 . 'GB';
} elseif($bytes >= 1048576) {
$bytes = round($bytes / 1048576 * 100) / 100 . 'MB';
} elseif($bytes >= 1024) {
$bytes = round($bytes / 1024 * 100) / 100 . 'KB';
} else {
$bytes = $bytes . 'Bytes';
}
return $bytes;
}
?>
3.接着textarea要这么写,引入upload.php文件(我的upload.php放在public文件夹下)
<textarea name="schoolinfo" class="xheditor {upImgUrl:'{{asset('/upload.php')}}'}">test</textarea>//这里必须引入upload.php文件
4.一些错误提示:
点上传没反应,一是你没正确的引用upload.php(你的路径错了),二是jQuery加载了两次,显示function xheditor(...)doesn't exist,因为第二次加载的jQuery覆盖了第一次的