I made a Markdown editor plugin for Q2A - thoughts/suggestions?

Question

UPDATE: check this thread for future updates.

I've been working on this on and off (mostly off), for a few months now. Finally I got round to finishing it to a reasonable state! It's a Markdown editor plugin, which has several advantages over CKeditor, the default in Q2A.

More details on the plugin, instructions and files to download are available here: http://codelair.co.uk/2011/markdown-editor-plugin-q2a/

It's licensed under GPL so it's free and open source. There are some minor bugs that I haven't managed to fix just yet, so if anyone manages to fix them please let me know and I will update it. Also, I have copied the files direct from my Q2A site where it's been in use for the last little while, so if there turns out to be any site-specific code that I left in there let me know ;)

I'd love to know what you think, and any suggestions for improvements! Just post an answer here.

Comments

I suggest to change this to a question, like "What are your opinions and suggestions for my Markdown editor plugin for Q2A?".

Besides that, I think your initiative is exciting - I've not yet tested it, but if it works you've filled the gap of a missing piece for me (and others I bet).

---

Thank you very much. By the way nice blog keep posting :).

---

Wow - thanks. Can I list this on the add-ons page or should I wait?

---

@gidgreen, yes you can post it on the add-on page. I managed to fix the link bug in Chrome, but that change is not live yet. Though I just discovered another bug in IE - when you click a toolbar button, the current selection is dehighlighted. So adding a link doesn't wrap it round the selection :/

---

Is there a demo for this?

---

I loves this plugin XD

May I suggest:

**An option for opening links in new windows
**The description text for links displays encoded in the markdown format (needs fixing)
**Unable to change the category when editing a question (might be q2a 1.4.3)
**When adding an answer or comment the page opens at the wrong anchor so you can't see the reply eitor until you scroll down (needs fixing)
**Smileys

Otherwise this is a great plugin that reduces loading times of each page also.

---

I added smilies to the markdown plugin here:

http://www.question2answer.org/qa/8646/who-likes-smilies#a8746

---

I fixed the issue with Markdown editor not scrolling to the correct anchor by changing line 27 of qa-markdown-editor from:

$qa_content['script_onloads'][] = ' document.getElementById("wmd-input").focus(); ';

to:

$qa_content['script_onloads'][] = ' document.getElementById(\'wmd-button-bar\').scrollIntoView(true).delay(800); ';

it seems that the built in function on q2a:

window.location.hash='targetID'

is being written after Markdown editors focus jQuery function, therefore causing the function to not work as expected.

I know this isn't the greatest method to fix the issue, but now my window focus is running as expected on my template :D.

---

Is anybody worried at all about the MASSIVE SECURITY HOLE this could create?

Doesn't markdown allow for passage of malicious scripts?

---

@stanleytweedle, all script tags should be removed, in both the JS side and the PHP side. Do you have an example that shows a security flaw?
EDIT: I just double-checked and the Javascript preview doesn't remove scripts (that's not a security hole since it's only visible to the user). On the server side the post is passed through Q2A's HTML sanitizer so no malicious scripts can get through.

---

Is it possible to allow people to upload attachments with the markdown editor?

---

@Trobee, not at the moment but over Xmas I'm gonna work on a new version and I'll keep this in mind.

---

Thanks for your plugin. That's very simple & beautiful for q2a.
But do you have a plan to add a image upload function for this editor ?

---

Dear @Scott have you tried to combine your plugin with MathJax? I mean editor preview generates also mathjax fonts as typing. Thanks

---

I haven't tested the new plugin  yet but I had a previous one that was quite nice. I hope in the new updated plugin if you can allow mathjax to be updated during preview mode and to allow its special characters such as backslash, \, single qoute', underscore _.

---

Just tested this on my QA site. Works nicely and just what I wanted! Very StackOverflow-esque. Thanks!

---

Thanks for your work! It works well on my site. Anyway, I want to know how to make it support in comment? is this simple?

Answer 1

Wow, Markdown plugin really has sense for me! Definitely I test it and I'm interested in father development.

I think we need simple WYSIWYG editor  with markdown like one at StackOverflow.

Answer 2

I have problem

Comments

version
1.4
1.4.1

---

You should read instructions before installing plugin. (2. step - Copy the CSS from sample.css to the bottom of your theme’s current stylesheet.)

---

Yep, that's what it looks like for me if I turn off CSS. So make sure to copy the CSS from sample.css to your qa-styles.css.

---

Oops, Sorry =[
thank you:)

Answer 3

"Open entered links in a new window:" feature doesn't work with Markdown editor.

Comments

What do you mean? Where is this option, in Q2A somewhere?

---

admin/viewing >> "Open entered links in a new window:"

---

OK I will take a look at this and see how to detect this option. The links currently get put through a native Q2A function so I thought that would take care of everything, but maybe not.

---

a temporary solution is to open:
qa-plugin\markdown-editor\inc.markdown.php

navigate to line 608 that contains:
$result .= ">$link_text</a>";

and replace it with:
$result .= "target=\"_blank\">$link_text</a>";

Hope this helps.

---

Thanks, it works :)

Answer 4

I left some comments on the project page, but I'll cross-post them here too.  Great plugin!  Thanks alot.  Much preferred over the wysiwyg editor.

Just one complaint, that 'top' should be changed to 'window' in the javascript, otherwise it breaks if q2a is running in an iframe.

Comments

I've replace text in the file markdown.min.js
...addEvent(top,"load"... to
...addEvent(windows,"load"... and it works fine in frame

UPD: well I'm also replace some other "top" to "window" in files markdown.min.js and in wmd.js

Answer 5

One complaint I have with the markdown js (not your plugin) is that when you quote text, it truncates it all, making it quite difficult to read.  Today I managed to "fix" this, by removing the following command from markdown.min.js:

    f.wrap(a,d.wmd_env.lineLength-2),

or from wmd.js:

    command.wrap(chunk, wmd.wmd_env.lineLength - 2);

Now it just adds quote marks to the beginning, as seems reasonable.

Answer 6

Thanks DisgruntledGoat for this wonderful plugin.

I saw this plugin working on your site, Can I use this pulgin for Q2A 1.4.2?

also will it show preview box? similar to what I can see on your site.

Is this plugin works on the custom created pages?

Comments

Yes, it works fine on 1.4 and it comes with the preview box. Make sure you copy the CSS from sample.css to your stylesheet for everything to display properly.
It doesn't work on custom pages, they just use a plain text box. I don't think there is any option to use a different editor, not even the WYSIWYG one.

---

Thanks! what changes does it make to database?

---

It doesn't make any changes at all. New posts made with the editor will have the type "markdown" in the database. There is a SQL query in the readme on github ( https://github.com/svivian/q2a-markdown-editor ) that will change the type of all old posts to markdown if you want that. It's not part of the plugin because it could break older posts.

---

Thanks again!

Answer 7

 

Thanks for your plugin. That's very simple & beautiful for q2a.

But do you have a plan to add a image upload function for this editor ?

Answer 8

I am using it at http://qa.libreprogramming.org/ It works nice but image upload feature is needed. It is a show stopper at least for my site where we need to share screenshots frequently.