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 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
详解vue使用$http服务端收不到参数
Apr 19 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php文件缓存类汇总
2014/11/21 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JavaScript DOM基础
2015/04/13 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue使用自定义指令实现拖拽
2021/01/29 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
详解Python中的循环语句的用法
2015/04/09 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
完美的中文自荐信
2014/05/24 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers