summernote的基本使用
HTML代码
//div添加个id就可以 <div id="summernote" ></div>
然后JS操作
//实例化调用var $summernote = $('#summernote').summernote({height: 300,minHeight: 200,maxHeight: 400,focus: true,callbacks: {//上传时调用onImageUpload: function (files) {uploadFile($summernote, files[0]);},//删除时调用onMediaDelete: function (target) {removeFile(target);}}})//上传图片function uploadFile($summernote, file) {var fd = new FormData();fd.append("file", file);$.ajax({url:"page/upload_img.php",data: fd,cache: false,contentType: false,processData: false,type: 'POST',success: function (data) {$summernote.summernote('insertImage', data,'img');}});}//删除图片function removeFile(target){var imgsrc = target[0].currentSrc;$.post('page/remove_img.php',{imgSrc:imgsrc},function(data){console.log(data);})}
PHP文件upload_img.php接收并储存到文件夹;
<?php //自己记得添加判断类型,文件大小等等判断语句,我这是调试的代码if($_SERVER['REQUEST_METHOD']==='POST'){$image=$_FILES['file'];$tmp_name=$image['tmp_name'];$new_name=$image['name'];$save_name='../uploads/'.$new_name;$move=move_uploaded_file($tmp_name, $save);//关于路径,自己要根据当前项目自己判断,储存路径和返回页面引用的路径if($move){//上传成功返回图片路径echo $save_name;}else{echo '上传失败';}}?>
PHP文件remove_img.php：客户端点击删除时服务器端删除储存的图片
<?php if($_SERVER['REQUEST_METHOD']==='POST'){if(empty($_POST['imgSrc'])){echo '没有找到文件';}else{$imgurl=$_POST['imgSrc'];$ruselt=unlink($imgurl);//注意自己文件的路径if($ruselt){echo '删除成功';}else{echo '删除失败';}}}?>
删除的时候是点击一下图片，图片会显示一个删除按钮，只有点击这个按钮才会触发删除事件，用键盘直接删除只能删除编辑器内的图片，服务器的图片没有删除
如果觉得《summernote富文本编辑器实现图片添加上传和删除图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
