环境: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