Open greenlaw110 opened 8 years ago
Will look into it
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:
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.
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;
}
});
@ashleydw solution should be officially supported so simple.
@ashleydw What needs to be done on the server's side to support this?
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.
@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() }
});
});
Hello, if anyone needs a working example, I've built up an example here with php : https://github.com/gautiermichelin/simplemde-markdown-editor
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:
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.
🤔
Support paste image directly from clipboard plus drag drop image files. Could refer to https://github.com/Rovak/InlineAttachment/