PHP使用summernote编辑器
summernote是一个很好用的编辑器,简单大方,基本功能都有,我只记录使用图片上传接口和获取内容接口功能的演示,其他的功能暂时还没有用到,下面是summernote编辑器的样子
1.summernote界面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图集内容上传</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>
<link rel="stylesheet" href="/public/static/assets/css/amazeui.min.css" />
</head>
<body style="width: 80%;margin: auto;" >
<form method="post" action="/index.php/admin/picture/form" id="myform">
<div id="summernote" >123</div>
<input type="hidden" name="content" id="content" value="">
<div class="am-form-group" align="center">
<div class="am-u-sm-12" >
<button type="button" class="am-btn am-btn-default am-btn-danger" onclick="submit_content()">保存内容</button>
</div>
</div>
</form>
<script>
function submit_content(){
var content = $('#summernote').summernote('code');
document.getElementById('content').value = content;
document.getElementById('myform').submit();
}
$(document).ready(function() {
var summernote = $('#summernote').summernote({
maxHeight: 500,
minHeight: 400,
lang: 'zh-CN',
focus: true,
callbacks:{
onImageUpload: function(files,editor,$editable){
sendFile(files);
}
}
});
});
function sendFile(files, editor, $editable) {
var formdata = new FormData();
formdata.append("file", $('.note-image-input')[0].files[0]);
$.ajax({
data : formdata,
type : "POST",
url : "/index.php/admin/picture/upload_image",
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
$('#summernote').summernote('insertImage', data);
},
error:function(){
alert("上传失败");
}
});
}
</script>
</body>
</html>
var content = $('#summernote').summernote('code');
这段代码可以获取到编辑器中的内容
sendfile函数中,url表示图片上传到PHP函数的地址,返回值为json格式的图片地址
下面是thinkphp5中的代码
public function upload_image($name){
$image = \request()->file($name);
if($image){
$info = $image->validate(['size'=>10000000,'ext'=>'jpg,png,jpeg'])->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
$image_src = '/public/uploads/'.$info->getSaveName();
return $image_src;
}else{
return '0';
}
}else{
return '0';
}
}