插件地址:https://github.com/baixuexiyang/artEditor 欢迎star或fork。
imgTar
图片上传按钮
limitSize
图片最大限制,默认3兆
showServer
显示从服务端返回的图片,默认是显示本地资源的图片
uploadUrl
图片上传路劲
data
上传图片其他参数
uploadField
上传图片字段
placeholader
富文本编辑器holder
validHtml
粘贴时,去除不合法的html标签
uploadSuccess
图片上传成功回调
uploadError
图片上传失败回调
需要修改的地方: index.js中的图片上传路径 修改成自己环境下的localhost或者127.0.0.1
【html代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>artEditor</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<!-- 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
<!-- iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="example/css/style.css">
</head>
<body>
<div style="width:100%;margin: 0 auto;">
<div class="publish-article-title">
<div class="title-tips">标题</div>
<input type="text" id="title" class="w100" placeholder="文章标题">
</div>
<div class="publish-article-content">
<div class="title-tips">正文</div>
<input type="hidden" id="target">
<div class="article-content" id="content">
</div>
<div class="footer-btn g-image-upload-box">
<div class="upload-button">
<span class="upload"><i class="upload-img"></i>插入图片</span>
<input class="input-file" id="imageUpload" type="file" name="file" accept="image/*" style="position:absolute;left:0;opacity:0;width:100%;">
</div>
</div>
</div>
</div>
<script src="example/js/jquery-1.11.2.js"></script>
<script src="dist/index.min.js"></script>
<script src="example/js/index.js"></script>
</body>
</html>
【php代码】
<?php
$img=$_REQUEST['file'];
$name='';
preg_match_all("/(jpeg)|(png)|(jpg)/", $img,$match);
if($match[0][0]=='jpeg' || $match[0][0]=='jpg'){
$base_img = str_replace('data:image/jpeg;base64,','', $img);
} else {
$base_img = str_replace('data:image/png;base64,','', $img);
}
$img_fix=$match[0][0];
// 设置文件路径和文件前缀名称
$path = "./upload/".date("ymd",time()).'/';
is_dir($path) OR mkdir($path, 0777, true); // 如果文件夹不存在,将以递归方式创建该文件夹
$prefix='img';
if($name ==''){
$output_file = $prefix.time().rand(1,999).'.'.$img_fix;
}else{
$output_file = $name;
}
$path = $path.$output_file;
// 创建将数据流文件写入我们创建的文件内容中
$ifp = fopen( $path, "wb" );
fwrite( $ifp, base64_decode($base_img) );
fclose( $ifp );
$path="/templets/default/editor/upload/".date("ymd",time()).'/'.$output_file;
echo $path;
?>