Add an image upload button in Markdown Editor

Question

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

Comments

Yes we need an simple but powerful editor like stackoverflow

Answer 1

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.

Comments

Scott here is a link take a look
http://ben.onfabrik.com/posts/pagedown-markdown-editor-custom-image-dialog

---

Any updates on this Scott?

---

Have you done it yet?.

Answer 2

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 .

Comments

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 ...
(blob)
http://www.question2answer.org/qa/15070/does-anybody-know-here-how-to-store-blob-image-as-normal-image

(ckeditor)
http://question2answer.org/qa/18980/tip-resize-jpg-images-on-upload

Thank You for Your great work !!!

---

Here is the css rule for resizing images

by Noah
http://www.question2answer.org/qa/9225/auto-fix-resize-images-posted-by-users

by Kai
http://www.question2answer.org/qa/19016/resize-images-automaticaly

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

Answer 3

@ Orunb : Here is a screen shot  

Comments

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 ;)

Answer 4

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?

Comments

Did you solve this problem  ?

Answer 5

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  {
position:relative;
max-width:100%;
height:auto;
}

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

 

:)

Answer 6

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!

Comments

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?

Cheers

---

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 :)

Answer 7

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