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

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

You have downloaded the latest version I made, right? Cuz there is no call to 'exif_imagetype' in my that version, but there was such a call in the first version.

---

i have download it from the link you provided in the answer above, in the qa-plugin.php, here is what i have :

    Plugin Name: Markdown Editor
    Plugin URI: https://github.com/svivian/q2a-markdown-editor
    Plugin Description: Markdown editor plugin for simple text-based markup
    Plugin Version: 2.3
    Plugin Date: 2012-06-14
    Plugin Author: Scott Vivian
    Plugin Author URI: http://codelair.co.uk/
    Plugin Contributors: NoahY
    Plugin License: GPLv3
    Plugin Minimum Question2Answer Version: 1.4
    Plugin Update Check URI: https://raw.github.com/svivian/q2a-markdown-editor/master/qa-plugin.php

---

What kind of image did you use, and when did you download it? I updated that link recently. In qa-md-upload.php, is there a call to 'exif_imagetype' ?

---

JPEG file, downloaded 5 hours ago , here is the code on qa-md-upload.php:
<?php
/* MADE BY BRUNO @ Orienting.us or Korion.net SEXY */

    require_once '../../qa-include/qa-base.php';
    require_once QA_INCLUDE_DIR.'qa-app-blobs.php';
   
    $p = $_POST;
    $allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
    foreach($_FILES as $f) {
        $detectedType = exif_imagetype($f['tmp_name']);
        if(in_array($detectedType, $allowedTypes)){
            $pi = pathinfo($f['name']);
            $name = $f['tmp_name'];
            $ext = $pi['extension'];
            //move_uploaded_file($f['tmp_name'], '');
            if ($id = qa_create_blob(file_get_contents($name), $ext)) echo qa_get_blob_url($id,true);
            else echo "error";
        }
    }

?>

---

Yeah that's the old version, you need the new one. That one doesn't resize, and uses 'exif_imagetype', which is now gone.

---

The new version also removes the disclaimer :D

---

Oh and if you could report back if the script works, that'd be great - I want to make sure it's good enough.

---

aha ! sorry where can i get the new version ? from the same link ?

---

Yes, from the same link!

---

GREAT !!! It does work perfectly ! thanks a lot Onurb

---

Oh I'm very happy about that, glad to help!

---

Oups ! please not that after several testing, it seems that upload for images less than 700px do not succeed : either it returs nothing or the following :

http%3Cbr%20/%3E%3Cfont%20size=%271%27%3E%3Ctable%20class=%27xdebug-error%20xe.....

---

Oh that's okay I'm looking into it right now.

---

Should work now.

---

Same link btw.

---

YES !! working great now ! thanks a lot for your Help Onurb !

---

Awesome! Whenever there's a problem you can contact me!

---

Perfect !

Uploaded a 4 mb / 3000px image and it was resized to properly and is less then 50 kb now.

Thanks !!!

Three points are still of interest out of my view:

1) Change languages (Text / Buttons) , is there something easy or do I have to go through the files ?
2) Show or not show some icons (ordered list, unordered list...)
3) Toggle between upload only, link to image url only or both.
I could set the url input field in the dialog to display: none in side the js,
but this is not perfect...

However, this is what I see still, thanks again for the excellent work.....

Additional loading time in my case, ( having set answerbox allways visible, and anybody can answer ) is between 50 and 100 ms because of the js files. PERFECT !

One other point: the script loads through qa-md-layer.php the jquery at ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js

Is that really necessary ? q2a is loading it as min anyway ?

Thanks !!!

---

Hm I think I can't avoid hard-coding the words, but the form html is in 'pagedown/markdown.min.js' (just do a search for 'qa_imageupload_form' without the parentheses). I could implement all this but I need to work on some other stuff now, and what you ask for can easily be altered manually. No you can delete that line I forgot to delete it but saw it afterwards, thanks!!! I'll update the link above with it!

---

Oh I think I already updated it actually :D

---

I am ok with going through the files, no problem, just wanted to mention it..

Thanks again

---

Oh no it's really appreciated I thank you very very much for your input in the matter. I'll work on a bigger update with admin panel stuff when I am done with my other stuff. Thanks for helping out with the testing!

---

Honor is on Your side, me and others have been waiting for a better image upload solution a long time...now we have it, so some small details are really not urgent...;)

---

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