Support paste image from clipboard and image uploading

[greenlaw110]

Support paste image directly from clipboard plus drag drop image files. Could refer to https://github.com/Rovak/InlineAttachment/

[WesCossick]

Will look into it

[greenlaw110]

To support pasting page, it needs talk to the server.

I end up with rolling out my own solution based on https://github.com/jbt/mdEdit, and here is how it looks like:

[WesCossick]

It's certainly an idea that could be integrated into SimpleMDE. Indeed it'd need to talk to a server, but some components could be built in. It's important to HOA Express so I imagine it'll be developed eventually.

[ashleydw]

It's fairly easy to get inlineattachment running. The /dist folder in the repo is being built incorrectly, so you'll need to grap the codemirror.inline-attachment.js and inline-attachment.js files from the source folder https://github.com/Rovak/InlineAttachment/tree/master/src

Then:

var simplemde = new SimpleMDE({ ... });

inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
    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;
    }
});

[abovebits]

@ashleydw solution should be officially supported so simple.

[TangentFoxy]

@ashleydw What needs to be done on the server's side to support this?

[eloyesp]

I've implemented something simillar in Rails:

//= require simplemde
//= require inline-attachment
//= require codemirror-4.inline-attachment

$(function () {
  var inlineAttachmentConfig = {
    uploadUrl: '/attachments',
    extraHeaders: {
      'X-CSRF-Token': $.rails.csrfToken()
    }
  }

  $('textarea.simplemde').each(function (_, element) {
    var simplemde = new SimpleMDE({
      element: element,
      spellChecker: false
    })
    inlineAttachment.editors.codemirror4.attach(simplemde.codemirror,
      inlineAttachmentConfig);
  })
})

On the server side it just needs an attachments controller with:

class AttachmentsController < ApplicationController
  def create
    image = Image.create! file: params[:file]
    render json: { filename: image.file_url }
  end 
end 

Adding more native support would help as, it could replace the "add image" button functionality.

[piedoom]

@eloyesp thanks for the rails help! It's exactly what I needed.

For those of you who are using Rails 5.1 with the jquery-free UJS, here's a little conversion of eloyesp's code to pure JS.

// assuming you tag your textareas with .md-editor
document.querySelectorAll('.md-editor').forEach(function(editor) {
  var simplemde = new SimpleMDE({ element: editor });

  inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
    uploadUrl: '/images',
    extraHeaders: { 'X-CSRF-Token': Rails.csrfToken() }
  });
});

[gautiermichelin]

Hello, if anyone needs a working example, I've built up an example here with php :
https://github.com/gautiermichelin/simplemde-markdown-editor

[doncadavona]

dev.to has a neat Markdown Editor with image uploads, similar to GitHub's. It would be nice to have an API that allows us to handle image uploads, something like:

1. Set a URL for uploading images
2. Listen to drag-and-drop events for images
3. Upload the image to the URL
4. Provide callback functions (success, error, finally) containing the image
5. Set the URL of the image from the URL's response.

What I am thinking is to keep it simple, we set the URL for POSTing images, and expect that URL to return a URL where the image is stored.

We don't need to worry about the Back-End, or processing of the images.

🤔