vueMarkdown编辑器实现粘贴图片功能

使用了一款比较好用的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:'![]({filename})',
            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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,342评论 25 709
  • 当简书大神还在不断的炫耀自己的6位数收入的时候,我还坐在这里苦等着领导的审批。这里没有励志,只有酸涩。 有一个邮件...
    奔跑的汤盆儿阅读 1,319评论 1 0
  • 猎物天下 转载2015-06-26 15:44:59 文/陈艳涛 每个物类都是衡量人类的尺度。陷在现代消费主义困境...
    37dc9392ece7阅读 2,286评论 0 1
  • 同样的事情,不同人完成的效果,,明显会有差异性,哪怕是一件很不起眼的小事,有些人只会草草了事.反之一部分人就会动脑...
    如风一般的女子阅读 1,513评论 0 1

友情链接更多精彩内容