使用了一款比较好用的vue-markdown编辑器:vue-simplemde
加上模仿github编辑器图片上传,比较灵活:InlineAttachment
具体实现可以参照两款插件的文档
粘贴图片功能代码:
require('./inline-attachment.js')
require('./codemirror-4.inline-attachment.js')
...
inlineAttachment.editors.codemirror4.attach(simplemde, {
uploadUrl:uploadImgUrl,
progressText:'![uploading file...]()',
urlText:'',
errorText:'Error uploading file',
jsonFieldName:'load',
uploadFieldName:'load',
extraParams:{
'referrer':referrer || 'default upload image',
},
extraHeaders:{
'Authorization':'Token ' + localStorage.getItem('authToken')
},
onFileUploadResponse: function(xhr) {
var result = JSON.parse(xhr.responseText),
filename = result[this.settings.jsonFieldName];
if (result && filename) {
var newValue;
if (typeof this.settings.urlText === 'function') {
newValue = this.settings.urlText.call(this, filename, result);
} else {
newValue = this.settings.urlText.replace(this.filenameTag, filename);
}
var text = this.editor.getValue().replace(this.lastValue, newValue);
this.editor.setValue(text);
this.settings.onFileUploaded.call(this, filename);
}
return false;
},
onFileUploadError:function(data){
console.log('err',data);
}
});
支持自定义编辑与渲染的Markdown编辑器vue-freemde 😄 ,喜欢请start。
Github: https://github.com/yansenlei