simditor 图片上传成功后修改图片地址

环境：simditor 版本2.3.6

开发中解决的问题：

1. 修改官方提供的demo中直接将默认图片插入到文本中的功能，下面的初始化就可以了

$(document).ready(function() {var toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code',  '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];var editor = new Simditor({textarea: $('#content'),placeholder: '这里输入内容...',toolbar: toolbar,defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片upload : {url : 'http://up.qiniu.com/', //文件上传的接口地址params: { token: token}, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交fileKey: 'file', //服务器端获取文件数据的参数名connectionCount: 3,leaveConfirm: '正在上传文件',},success: function(data) {alert(data);}});  });

2. 将图片地址替换成服务器的地址，MD说说遇到的坑，一开始的思路是图片上传完后通过回调的方式修改图片的src地址，完全错误

simditor.js 与 upload.js 是有关联的，当图片上传成功后会把结果传给 simditor.js ，我们只需要把 JSON 对象修改成simditor.js 想要的就可以，主要是修改file_path 参数值

success: (function(_this) {return function(result) {var newresult = JSON.parse("{\"file_path\":\"http://xxx.com/"+ result.key +"\"}");_this.trigger('uploadprogress', [file, file.size, file.size]);_this.trigger('uploadsuccess', [file, newresult]);return $(document).trigger('uploadsuccess', [file, newresult, _this]);};})(this)

传

4417 line

this.editor.uploader.on('uploadsuccess', (function(_this)

最终效果图

http://ww2.sinaimg.cn/bmiddle/82f3bc47jw1f14u14jk8lj21da0ran2w.jpg

simditor 图片上传成功后修改图片地址相关推荐

**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
【ElementUI】el-upload 到底该怎么使用？记录有时上传图片会失败，有时上传成功又出现图片闪动的问题
ElementUI 官网 el-upload 组件使用:https://element.eleme.cn/#/zh-CN/component/upload 作为一个经常使用 ElementUI 的 C ...
宝贝上传店铺后把图片空间的图片删了有影响吗
问题1:调用SPU服务异常,原因是:已存在产品ID为:[2154156604] 的产品"} 解决方案:经过分析,这是因为上传的店铺内,已经存在产品ID为:[21541 ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
若依图片上传成功不能显示的解决办法？
文件上传成功后,请求访问后台地址会根据profile进行匹配,需要自己配置nginx代理. 方式一:指向地址 location /profile/ {proxy_pass http://127.0.0 ...
php 点击选择图片上传,快速实现PHP图片上传和预览
用户点击选择文件选好图片后,自动进行一次提交.完成图片的上传.但不修改原引用图片的地址.后续第二次提交是修改result文件中引用图片的地址(PS:为了简便这里使用了result文件),完成整个上传 ...
antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...

simditor 图片上传成功后修改图片地址

simditor 图片上传成功后修改图片地址相关推荐

最新文章

热门文章