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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
JavaScript中return false的用法
Mar 12 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
javascript实现图片轮换动作方法
Aug 07 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
php在线生成ico文件的代码
2007/10/09 PHP
php去除HTML标签实例
2013/11/06 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
Position属性之relative用法
2015/12/14 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
python使用cookielib库示例分享
2014/03/03 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python中wheel的用法整理
2020/06/15 Python
Python 使用office365邮箱的示例
2020/10/29 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
银行服务感言
2014/03/01 职场文书
道歉短信大全
2015/05/12 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
2016春节放假通知范文
2015/08/18 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript