Summernote实现图片上传功能的简单方法
更新时间：2016年07月11日 10:05:17 投稿：jingxian
下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
还是接着之前说过的最近在写一个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实现图片上传功能的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇ichart.js绘制虚线、平均分虚线效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
这篇文章主要介绍了详解ES7 Decorator 入门解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最近在学习微信小程序，下面就学习的内容进行总结，这篇文章主要给大家介绍了关于微信小程序利用co处理异步流程的方法，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-05-05
下面是一段利用谷歌地图API获取点点之间距离的代码，采用V3版本中的DirectionsService()2012-10-10
任何编程都提出代码复用，否则话每次开发一个新程序或者写一个新功能都要全新编写的话,效率太差了,接下来我们将针对代码复用来进行讨论，需要的朋友可以参考下2012-12-12
这篇文章主要介绍了uniapp项目实践自定义滑动触摸组件实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了JS实现的简单标签点击切换功能,涉及javascript事件响应及页面元素遍历、属性动态变换等相关操作技巧,需要的朋友可以参考下2017-09-09
本篇文章主要介绍了js和jquery中获取非行间样式的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
DataGear开发基于three.js的3D数据可视化看板的详细代码
DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板，也支持导入由npm、vite等前端工具构建的前端程序包，这篇文章主要介绍了DataGear制作基于three.js的3D数据可视化看板,需要的朋友可以参考下2024-02-02
最新评论