如何将editor.md的图片上传改成七牛?

2016-07-13 23:07:00

之前的编辑器一直用的是simditor, 但是问题也不少, 之后觉得换成markdown编辑器, 首选当然就是editor.md, 主要原因就是界面美观, 功能全面...

但是editor.md问题也有, 比如图片上传, 不知道为什么作者会用那么蛋疼的表单上传, 难道只是为了兼容IE8? 看了github上的维护时间, 最后一次维护差不多半年了, 想让作者来改, 可能性是不大了, 那么就只能自己来了...

editor.md的图片上传是以插件的形式存在的, 文件在./plugins/image-dialog/image-dialog.js, 我们就拿这个文件开刀.

另外, editor.md添加图片后, 不设置alt, 会自动跳到第二行, 只需要把cm.setCursor(cursor.line, cursor.ch + 2)注释了即可, 没有搞明白作者这段代码的用意是什么...

exports.fn.imageDialog = function () {
var cm = this.cm
var lang = this.lang
var editor = this.editor
var settings = this.settings
var cursor = cm.getCursor()
var selection = cm.getSelection()
var imageLang = lang.dialog.image
var classPrefix = this.classPrefix
var iframeName = classPrefix + 'image-iframe'
var dialogName = classPrefix + pluginName,
dialog
cm.focus()
var loading = function (show) {
var _loading = dialog.find('.' + classPrefix + 'dialog-mask')
_loading[(show) ? 'show' : 'hide']()
}
if (editor.find('.' + dialogName).length = 0 ? '&' : '?') + 'guid=' + guid
if (settings.crossDomainUpload) {
action += '&callback=' + settings.uploadCallbackURL + '&dialog_id=editormd-image-dialog-' + guid
}
var dialogContent = ((settings.imageUpload) ? '' : '') +
'' + imageLang.url + '' +
'' + (function () {
return (settings.imageUpload) ? '' +
'' +
'' +
'' : ''
})() +
'[br]' +
'' + imageLang.alt + '' +
'' +
'[br]' +
'' + imageLang.link + '' +
'' +
'[br]' +
((settings.imageUpload) ? '' : '')
dialog = this.createDialog({
title: imageLang.title,
width: (settings.imageUpload) ? 465 : 380,
height: 254,
name: dialogName,
content: dialogContent,
mask: settings.dialogShowMask,
drag: settings.dialogDraggable,
lockScreen: settings.dialogLockScreen,
maskStyle: {
opacity: settings.dialogMaskOpacity,
backgroundColor: settings.dialogMaskBgColor
},
buttons: {
enter: [lang.buttons.enter, function () {
var url = this.find('[data-url]').val()
var alt = this.find('[data-alt]').val()
var link = this.find('[data-link]').val()
if (url === '') {
alert(imageLang.imageURLEmpty)
return false
}
var altAttr = (alt !== '') ? ' "' + alt + '"' : ''
var arr_url = url.split('$$')
var text = ''
for (var i = 0, length = arr_url.length; i i) {
var formdata = new FormData()
formdata.append('file', files[i])
formdata.append('key', new Date().getTime() + '.jpg')
formdata.append('token', '七牛账号对应的token')
$.ajax({
type: 'POST',
url: 'http://up.qiniu.com/',
data: formdata,
dataType: 'json',
contentType: false,
processData: false
}).then(function(json) {
var oldurl = $('[data-url]').val()
if (oldurl === '') {
$('[data-url]').val('七牛图片服务器的域名/' + json.key)
} else {
oldurl = oldurl + '$$七牛图片服务器的域名/' + json.key
$('[data-url]').val(oldurl)
}
i++
Qiniu_upload(files, length, i)
}, function (err) {
console.log(err)
})
} else {
$('[name="file"]').val('')
loading(false)
}
}
var submitHandler = function() {
var files = $('[name="file"]')[0].files
if (files.length > 0) {
Qiniu_upload(files, files.length, 0)
}
return false
}
var fileInput = dialog.find('[name="file"]')
fileInput.off('change').on('change', function() {
var fileName = fileInput.val()
var isImage = new RegExp('(\.(' + settings.imageFormats.join('|') + '))$') // /(.(webp|jpg|jpeg|gif|bmp|png))$/
if (fileName === '') {
alert(imageLang.uploadFileEmpty)
return false
}
if (!isImage.test(fileName)) {
alert(imageLang.formatNotAllowed + settings.imageFormats.join(', '))
return false
}
loading(true)
dialog.find('[type="submit"]').off('click').on('click', submitHandler).trigger('click')
})
}
dialog = editor.find('.' + dialogName)
dialog.find('[type="text"]').val('')
dialog.find('[type="file"]').val('')
dialog.find('[data-link]').val('http://')
this.dialogShowMask(dialog)
this.dialogLockScreen()
dialog.show()
}