Summernote实现图片上传功能的简单方法


Posted in Javascript onJuly 11, 2016

还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货

然后发现了很尴尬的问题...图片上传功能无效....然后各种搜索各种无果...最后怒翻Summernote官方文档总算解决了,总之写下解决过程

后端部分就不提供代码了,满大街都是,这里假设后端拿到上传文件后返回文件的地址

首先附上参考资料:Summernote官方开发文档

简单说下Summernote的图片上传功能实现方案

首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传文件,最后用API把图片插入到编辑框内即可

本来是挺简单的问题,可惜官方也不知道为什么居然更改了接口写法...然后网上搜到的资料全都坑掉了....虽然也有我搜的不够深入的原因

总之整理下核心的两个SummernoteAPI,接管文件上传事件和插入图片,根据官方文档说明格式如下

//接管图片上传事件
$('#summernote').summernote({
  callbacks: {
   onImageUpload: function(files) {
    // 上传图片到服务器并且插入图片到编辑框
   }
  }
});

//插入图片
$('#summernote').summernote('insertImage', url, filename);
//更加详细的解释见上面提供的官网API文档

然后就可以很轻松的实现支持上传图片的Summernote编辑框了

代码如下:

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      //上传图片到服务器,使用了formData对象,至于兼容性...据说对低版本IE不太友好
      var formData = new FormData();
      formData.append('file',files[0]);
      $.ajax({
        url : 'upload',//后台文件上传接口
        type : 'POST',
        data : formData,
        processData : false,
        contentType : false,
        success : function(data) {
          $('#summernote').summernote('insertImage',data,'img');
        }
      });
    }
  }
});

最后,这只实现了一个最简单的,兼容性不怎样而且完全不考虑错误异常提示的图片上传功能而已....请根据需要自行修改

以上这篇Summernote实现图片上传功能的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript 常用方法总结
Jun 03 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
动态加载JavaScript文件的3种方式
May 05 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
全面理解闭包机制
Jul 11 #Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 #Javascript
利用css+原生js制作简单的钟表
Apr 07 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python实现划词翻译
2020/04/23 Python
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python实现简单神经网络算法
2018/03/10 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python实现的发邮件功能示例
2019/09/11 Python
详细分析Python collections工具库
2020/07/16 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
竟聘演讲稿范文
2013/12/31 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
考试诚信承诺书
2014/05/23 职场文书
爱护公共设施的标语
2014/06/24 职场文书
社团活动总结格式
2014/08/29 职场文书
医德考评自我评价
2014/09/14 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
中标通知书格式
2015/04/17 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python