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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
vue 页面跳转的实现方式
Jan 12 Vue.js
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
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
vue实现登录拦截
2020/06/29 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python龙贝格法求积分实例
2020/02/29 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
建议书怎么写
2014/03/12 职场文书
交通安全标语
2014/06/06 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
机电系毕业生求职信
2014/07/11 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫