Laravel5.2中使用xheditor编辑器实现上传图片功能

安装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覆盖了第一次的