Summernote 上传图片至 SMMS 图床 Api

#Summernote上传图片至SMMS图床Api

SummerNote是一款WYSIWYG（what you see is what you get）富文本编辑器，支持Bootstrap4，中文本地化，支持图片上传，本篇教程教你如何让编辑器默认上传图片到smms图床

官网查看

放个链接，官网上基本啥都有

官网地址

引入 summernote

在HTML头部引入CDN加速的 js文件，这里我修改成了国内CDN镜像，并且用的是Boostrap4样式的编辑器

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- summernote for bs4 -->
<link href="https://cdn.bootcss.com/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/summernote/0.8.12/summernote-bs4.min.js"></script>
<script src="https://cdn.bootcss.com/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script>

在需要添加富文本编辑器的地方输入，或者用div包裹也可以

<textarea id="summernote"></textarea>

初始化并自定义上传到SMMS图床

$(document).ready(function() {$('#summernote').summernote({placeholder: '在此处输入您的维修建议，可加入图片',tabsize: 2,height: 150,lang: 'zh-CN', // default: 'en-US'//调用图片上传callbacks: {//图片上传onImageUpload: function(files, editor, $editable) {sendFile(files[0], editor, $editable);},//图片删除onMediaDelete: function(target) {console.log(target[0].attributes.hash.value)deleteFile(target[0].attributes.hash.value);}}});//上传图片function sendFile(file, editor, $editable) {var formdata = new FormData();var fileName = file['name'];formdata.append("smfile", file);$.ajax({//图片上传出来的url，返回的是图片上传后的路径，http格式url: "https://sm.ms/api/v2/upload",type: "POST",data: formdata,cache: false,contentType: false,processData: false,dataType: "json",success: function(res) {//url:图片路径 filename：图片名称$('#summernote').summernote('insertImage', res.data.url, function($image) {$image.css('width', $image.width() / 3);$image.attr('hash', res.data.hash);$image.attr('data-filename', res.data.filename);});},error: function() {alert("上传失败");}});};function deleteFile(src) {$.ajax({type: "GET",url: "https://sm.ms/api/v2/delete/" + src,cache: false,success: function(res) {alert("删除成功")console.log(res)}});}

然后就可以实现点击上传图片上传到smms图床，并且点击图片删除的时候图床也删除，不会使用自带的base64产生大量长字符了，方便储存，也方便读取

存在的缺陷

没有用smms的V2图床进行鉴权操作，因为我搞不明白，一加auth就报错无法上传，那就算了

Summernote 上传图片至 SMMS 图床 Api相关推荐

layer 上传图片点击取消仍在加载_上传图片到smms图床（整合layer上传插件） by：小灰灰 | 小灰灰博客...
Document 上传图片选择多文件文件名大小状态操作开始上传 layui.use(['form', 'layedit', 'laydate', 'element', 'upload'], f ...
Java模拟登陆微博获取cookie+使用微博图床api上传图片
前言 Wbp4j 前排安利以下使用java完成的基于微博图床api实现的一个上传图片的小轮子,然后里面也有完整的代码可以查看,欢迎戳一下~ 传送门目的因为最近个人小项目里需要上传图片,看着自己的1 ...
Typora+PicGo-core+SMMS图床踩坑记
Typora+PicGo-core+SMMS图床踩坑记一.安装PicGo-Core 二.安装smms v2 API插件三.配置PicGo-Core 四.最终效果五.总结最近把Typora更新后 ...
delphi 调用php接口_新浪图床 API 接口调用与请求方法详细教程
新浪微博图床API在网上已经很多且大都封装成了API供别人调用,这里分享其核心代码.支持前台跨域请求,以POST方式提交图片即可.新浪图床可以将你的图片远程上传到新浪服务器,你可以选择调用本站的接口, ...
发现一个微博图床API和图片上传代码
网上寻到一款微博图床的插件,然后顺藤摸瓜找到了原作者的API代码. API文件: 1 <?php 2 /** 3 * 上传图片到微博图床 4 * @author Youngxj & me ...
imgbb图床API
imgbb 图床 API 及其插件以下内容均可以在 imgbb 图床官网的相关API文档找到.此处仅做学习记录. 在 imgbb 官网注册账号后,点击左上角的[关于]–[API]即可看到相关的使用文 ...
随机二次元新浪图床api源码
介绍: 随机二次元新浪图床api源码,图片默认均为http,采用新浪图片,高速访问. 有兴趣的小伙伴可以自己替换为更好的图片链接地址. 网盘下载地址: http://kekewangLuo.net/t ...
typora使用smms图床
typora使用smms图床 0.安装typora 通过各种途径你先安装typora 1.下载picgo-core(command-line) 依次点击"文件-偏好设置-图像",下 ...
typora+picgo+smms图床配置（亲测成功）
PicGo(app)设置smms图床(亲测成功) 文章目录 PicGo(app)设置smms图床(==亲测成功==) 1.PicGo软件下载安装 2.smms图床注册设置 1.PicGo软件下载安装 ...