Markdown plugin [updated: v2.2]

Question

I have updated my Markdown editor plugin to fix the few bugs that were present in the Chrome browser and a few more I found with the preview. This now uses the PageDown script that Stack Overflow uses so it's very stable. Tested with both 1.4 and 1.5.

https://github.com/svivian/q2a-markdown-editor - click ZIP in the top left to download package, or use Git so you can keep it updated easily.

Update 14/06/2012 - version 2.2 with some new features:

• Uses the plugin update check.
• Links open in a new window, if the option is set in Q2A.
• CSS is added inline, to save you having to add it to the stylesheet. There is an option to not use inline CSS, if you want to use the stylesheet (which is more efficient).
• An option that converts to plaintext when turning an answer into a comment.
• Integration of Syntax Highlighting (same component as NoahY's version)

 

Comments

Nice! Good job, DG.

---

May I request an image upload feature please?
It's a core  function now, so should be doable.

---

thanks for this great plugin.
I want to ask that is there a way to remove the "insert code tag" and how to add a image upload feature.

---

@Ashish, the quickest way is to hide it with CSS: #wmd-code-button { display: none }
But that leaves a gap where the button was. You'd have to change the positions set on the other buttons, which looks like it should be lines 1424-1445 in Markdown.Editor.js.

---

When I added this, I get a series of 20 or so bullets and then a very small edit field.  Is that the normal behavor?  Not formatting buttons or anything like the WYSIWYG editor?  I turned it off becuase I thought it wasn't working.

---

@Scott you need to add the CSS, check the readme file for details. I'm working on including that by default since it seems like an annoying extra step for many people :)

---

@Disgruntled I did add the css lines to the end of my theme's css file.  I'll re-read the readme to see if I've missed something.  Thanks for the follow-up

---

Is there a site where I can see this working?

---

It seems very good. But is it the last version? I think many people are waiting for the upload feature...

---

@icebluehorse no it's not the last version, in fact I just updated it (on Github) with some new features. I will look into the upload feature.

---

I find a bug. When I use this plugin in (A) IE8 and (B)set site language as Chinese, all icons of this plugin are missing, while it works great in other browser or English environment. Like below:
1. English:   http://vdisk.weibo.com/s/6_WnE
2. Chinese:    http://vdisk.weibo.com/s/6_WoB

---

@icebluehorse that is strange, are you using the latest version? I tested myself using the Chinese Simplified theme from this site, and IE9 Compatibility Mode (which replicates IE8) and didn't have a problem. Not sure what the problem could be.

---

hi, I want to translate this plugin, like " strong <strong> Ctrl+B ". Where can I update it to " 加粗<strong> Ctrl+B"?

---

@icebluehorse those text strings are in the Javascript files - around line 1424 in Markdown.Editor.js. You'll need to edit those then merge/compress the three main JS files back into markdown.min.js

---

Thanks,I translate it perfect.
The other question,I insert a large picture,then find that only a part can be shown.I think it's more friendly to show the whole picture than cutting it.How about this idea? And how can I make it.

---

That will be due to Q2A's CSS settings, I think the posts are set to "overflow:hidden" to prevent them overlapping other elements. You can probably do something like
.qa-q-view-main img { max-width: 100%; }

---

good,I add .qa-q-view-main img { max-width: 100%; } and .qa-a-item-content img { width: 100%;} in qa-style.css. The image seems very nice.Thank you.

---

Much better editor than the default one. However, line break aren't showing in the preview or displayed text. Any ideas pelase?

---

Turns out it was a css clash with NoahY's YouTube Embed plugin, specifically margin-top:0.  I've removed the plugin for now.

---

I find a bug: when input _ , it will be hidden. Like this post(which has the same title and content ):
http://weiboqa.sinaapp.com/index.php?qa=28&qa_1=with_offical_accountwith_offical_accountwith_offical_account

---

That happens because the underscore is for making text italic. If you look at the source it's like this:
    <p>with<em>offical</em>accountwith<em>offical</em>accountwith<em>offical</em>account</p>
For some reason it doesn't show up italic on your site.

Solution:
(1) put a backslash before any special characters like this e.g. with\_offical\_account
(2) or, make it the code style which will preserve the characters e.g. `with_offical_account`

---

yeah,code style is a good solution. But i think our users can't know it. Or if the website is not for developers, or if the words are not code...
Maybe it should be more friendly and general, for our users. It's a suggestion.

---

I think if you want something completely idiot-proof you should use the WYSIWYG editor.

---

Need image upload. Very nice and much needed plugin. I can get MathJax and mhchem working for Maths and Physics without any hassle.

---

@scott,
This is a great plugin. Just one thing I found if you can make width for .wmd-button-bar and .wmd-input responsive which fits with any layout width that is better. Now it has to change according to theme .qa-a-item-main width. I know this is not big issue but for people who doesn't know at all it is little difficult to find and fix it.

---

@scott Hi . Can you enable mathjax rendering in live preview ?

---

@princeps I have no plans to implement mathjax in the Markdown editor, so you'll have to do that yourself, sorry. If you don't know how to do that then perhaps post a new question here and someone may help you.

---

@scott
Sorry for repeated second request. Can you please incorporate image upload feature?

---

In case anyone interested, this is how to enable mathjax preview interactivity.
Add the following function to Markdown.Editor.js:

             util.addEvent(panels.input, "keyup", function () {
                var previewID=this.id.replace("input","preview");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, previewID]);
            });

---

the linebreak problems with the embed conflict can be resolved by turning off lightbox within the embed plugin.

Answer 1

Great :) just wondering why not include the CSS in a layer?  Much easier than having people copy it over, and then you can also specify which requests to add the css to.

Also, Gideon gave a solution to the first line indenting problem, which is to do:

        $html=$_POST[$fieldname];

rather than

        $html=qa_post_text($fieldname);

Otherwise, seems to work great, even for comments.  I'm updating my version with the syntax highlighting to match the changes, not sure if you're interested in merging, but it's here:

https://github.com/NoahY/q2a-markdown-editor

Comments

Regarding CSS, maybe I could make it an option. I've done it like that because it's better to serve all CSS from one file than from several files or inline to a page. Since it would be on every question page it makes sense to put it in the stylesheet so the user only downloads it once, not on every page load.

I'll take a look at the syntax highlighting. I thought that was a separate plugin though, not a mod of the editor itself.
EDIT: from the look of it, it's just a Javascript that does the highlight. What changes have you made to the PHP code? I may be able to integrate the highlighter in to mine quite easily.

---

Ah, that makes sense that the css would be cached.  Still, too bad to have to copy and paste it.

no changes to the php were required, as far as I remember, just added a layer and admin module - the former does a timeout after every keypress to reformat the text, and on document load; the latter has options for highlight css.

---

@ Noahy I am getting some problem with your markdown plugin :
example if i write :
i do'nt need

in markdown editor after saving post it shows :
i do/'nt need

it add backslash in text after saving.
please take a look in this matter.

---

You can add the CSS only to editor pages. So that in 98% it won't affect the page speed, and editor would be slower anyway. I believe users will accept this.

Answer 2

Hi Scott, I found a markdown editor with live preview (using jquery), maybe you like to implement this in one of the future versions?

http://oscargodson.github.com/EpicEditor/

Comments

What is the advantage of this version? My current version does everything that does (except full screen). Does that one have a toolbar? I couldn't see any options for it.

---

ah okay, I am not using your markdown editor but remembered that you are developing/maintaining this plugin, so I thought this would interest you regarding the live-preview-thing...

---

Is this site yours? http://www.gute-mathe-fragen.de/ask
I think this editor is also nice.Since the live previewing,and auto saving,or other advantage I haven't find?
If we can add other function in the toolbar,it maybe better.

Answer 3

 

Today I find a way how to easily implement image upload service together with Markdown editor. The solution is universal and can be used with any text editor. 

Here is a link to short tutorial I made about how to implement file uploading. (File uploading is made by using external service)

http://blog.inventic.eu/2012/11/q2a-markdown-editor-with-file-upload/

Answer 4

Hi scott, i was seeking lately a solution fo image uploading and found the following  that might help in the futur versions 
http://jordanarseno.com/blog/8/uploading-images-with-wmd-editor

Thnks !!