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

你可能感兴趣的:(vueMarkdown编辑器实现粘贴图片功能)