summernote富文本编辑器实现图片添加上传和删除图片

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富文本编辑器实现图片添加上传和删除图片相关推荐

summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
UEditor 富文本编辑器-后端实现文件上传功能
一.背景前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能本文根据文章:vue+Ueditor集成 [前后端分离项目][图片.文件上传][富文本编辑] ...
SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
背景最近要用到一个富文本编辑器,记得遥远的年代,调过Kingeditor.Ueditor...但是那些都很重,,,于是最近经常再留意这件事,直到最近看到一个wangEditor,体验了一下,又轻又好 ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...

summernote富文本编辑器实现图片添加上传和删除图片

summernote富文本编辑器实现图片添加上传和删除图片相关推荐

最新文章

热门文章