Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+15 votes
in Plugins by
any one please tell me that how to Add an image upload button in Markdown Editor like stackoverflow ?

Markdown Editor: https://github.com/svivian/q2a-markdown-editor
Q2A version: 1.5
Yes we need an simple but powerful editor like stackoverflow

7 Answers

+5 votes
This is something I am looking into (I am the Markdown editor dev). I may wait for v1.6 to come out though, because it's possible there will be a better way to handle images.
Any updates on this Scott?
Have you done it yet?.
+10 votes
edited by

I've made this myself, took me 2 days and Gideon, sama55 and jatin.soni were very helpful.

Reporting bugs is welcome!

You can download it here .

Excellent work, the community needed another way to upload images.
I am testing now and found that a large image makes problems.
It is cut off.
There are two ways to resolve that:
Resize by css
or resize through php.

The second one is much better.

A time ago I wrote some code to resize the blob once having it in the function, a second part of code for resizing in the ckeditor.php file was written by Kai.

I think reading both would be useful.

Would be great if You or others could implement this as well.
I am a novice to programming, or better, I cant ...


Thank You for Your great work !!!
Here is the css rule for resizing images

by Noah

by Kai

I have added the last one to Your css and it works fine. Ony problem is that large images need a lot of resources, thatfor resizing them through php would be much better...
I copied the css into my css file and by adding this at the end of the css file images with large dimension are resized properly in both the post and the preview....

.entry-content img { max-width: 580px; border:1px solid #AAAAAA; }
.wmd-preview img { max-width: 580px; border:1px solid #AAAAAA; }
I've updated the source code to resize, you can change the max width in qa-md-upload.php
The max width is now 700 and I've added your CSS, thanks for that!
i have installed successfully in localhost but instead of image it returns a lot of "%", is it because of localhosting ?

Thanks !
Does it write in the database? Where exactly did you install it?
In the qa-plugin folder, same as the old MD editor , is that right ?
The '%', can you share it? Is it just '%' or is there actually an error in there? Cuz if the code results in an error it should display in the link field.
Please see the screen shot ;)
maybe a silly question, but do you think there would ever be plans to support uploading any kind of file, as opposed to just an image? for example, text document, spreadsheet, etc? not that it would need to have any kind of integrated display, but just a generic link of some sort? if it was supported, may make sense as a separate icon/feature from image uploads.
IT IS SUCH A GOOD PLUGIN !!! but I find there is something should be impoved , we have to wait the image be uploaded then we can click ok ,otherwise , the image is fail to be uploaded ,but I don't think it is good to make the user to wait it for even some seconds , I think you genius guys can change this ,THX !
I'll work on it one day but have little time for this right now.

@West that's a good idea, to solve that. It'll be difficult though.
@mfeizani one could add an upload element to the hyperlink popup thingy. That seems like a good idea too!
cool, i'll keep an eye on this space. from our side we just use the forum for internal users only so we don't really have a concern of someone posting a pagefile.sys or anything. having the ability to make the forum hold on to other non-image content would be a huge benefit.
Works great, however when editing the posts the toolbar disappears and I get this error in the console, anyone else getting this?

Uncaught ReferenceError: Markdown is not defined
+2 votes

@ Orunb : Here is a screen shot  

There is an issue with transparent images - I'm working on it. Got it to work but now the whole image is black-and-white.
I'll add some admin stuff if I can too, since the other projects are stuck (I don't know how to proceed).
I've solved the transparency issue, now I'll add some admin stuff, but I can't promise anything.
I updated the link - now transparency is allowed & there is one admin option making the file upload an option rather than the rule.
Working great ;)
+1 vote

Hello! I've just tried you version of Scott's plugin, but can't get it working :( Can you help me please? I have errors in nginx error log:

2789#0: *1 FastCGI sent in stderr: "PHP message: PHP Warning:  file_get_contents(../qa-plugin/markdown-editor/pagedown/markdown.min.js): failed to open stream: No such file or directory in /var/www/www.mydomain.com/qa-plugin/markdown-editor/qa-markdown-editor.php on line 36" while reading response header from upstream, client: x.x.x.x, server: www.mydomain.com, request: "GET /ask HTTP/1.1", upstream: "fastcgi://unix:/tmp/wwwpool.sock:", host: "www.mydomain.com", referrer: "www.mydomain.com/"

File markdown.min.js is in the right directory.
allow_url_fopen is on. May be somethings else I need to configure in my php.ini or nginx conf file?
Did you solve this problem  ?
0 votes

Kudos @scott.

Additional css:

Force large images inside a div or table.Type this in your qa-styles.css

.wmd-preview p img,.entry-content p img  {

modify as you need.
Works well combined with fancybox.js to view the image larger - fancyapps.com



+2 votes

If you want to save images to disk, rather than database, you can download a slightly modified version from here: https://github.com/bvassy/q2a-markdown-editor

Thanks to Scott and Waaaaaaa for the time invested!

This is awesome, thanks so much for this!!

I have a small problem however, the notification emails I get sent have the image link instead of the image itself, would this be an easy fix, do you know?

You're welcome! As for the image link, I don't think it's because of my changes. I'll look into it, although it might take a while because I'm new to Q2A and still learning the system :)
0 votes

This is indeed very good. 

But I am having a slight problem. 
My site uses the rtl language. and this posed some problems. 
1.the icons are on the left side of the editor, instead of being in the right.

2.when I try to use the code icon, for formatting and syntax highlighter, it formats it right to left, when it should be formatted left to right. 

this is how it looks on my site:

how can I fix these ? where should I change?  

Thank you very much