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


你可能感兴趣的:(js)