WMD Editor Wordpress Plugin

Pulled from the WMD main site.

wmd-editor-snapshot

WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use. The next release will be open source under an MIT-style license.

This is not a WYSIWYG editor. Writing HTML to look a certain way can make your text less accessible to blind people, search engines, mobile users, and feed readers. HTML describes a document’s logical structure—not its appearance. It just wasn’t built for WYSIWYG.

So WMD is something new: a Wysiwym Markdown editor.

  • Wysiwym stands for What You See Is What You Mean. WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.
  • Markdown is a simple markup language that’s as easy to read and write as plain-text email. WMD uses Markdown as an input format, converting it into HTML behind the scenes. You can also mix raw HTML with Markdown, so the full expressiveness of HTML is always there if you need it.

WMD is just as easy to use as any WYSIWYG editor, so you don’t need to know anything about Markdown or HTML to write clean, semantically meaningful markup. You click the buttons, and WMD writes the Markdown.

Live Preview Feature

In order to use the live preview feature (see demo below), you’ll need to edit your template file comments.php.

You’ll need to add this html


<h2 class="previewtitle">Live Comment Preview</h2>
<div class="wmd-preview"></div>

to the bottom of that file, just above the endif; call. So it should appear much like this:

1
2
3
4
<?php endif; // If registration required and not logged in ?>
<h2 class="previewtitle">Live Comment Preview</h2>
<div class="wmd-preview"></div>
<?php endif; // if you delete this the sky will fall on your head ?>

You can lose or modify the <h2> tag to better suit your design needs.

Download

WMD Editor Plugin 1.0

Suggestions on how to improve the plugin code are always welcome. :)

FAQ

How do I remove the WMD Editor from specific textareas?

You can add class=”wmd-ignore” to the textarea tag of any form that you do not want the editor to be used.

28 Responses

Comments

  1. Great Plugin! This is exactly what a comment field should act and appear :) Thanks a lot!

  2. La Verdad muy buen Editor lo pondre en mi Web

  3. Very nice. :)

  4. Great Editor must say and it dose exactly what it should

  5. Hy!

    Is it possible to enter certain areas of the editor out? So it does not automatically in all forms is displayed?
    Thank you

  6. Fantastic! Just what I was looking for.

    Many thanks.

  7. I was looking how you made this possible… and found you create a plugin :-) Very nice.

  8. Great plugin, but I ran into an issue (and solution) that may have others pulling their hair out so I thought I’d share it here..

    In developing my new WP theme, I created a tiny contact form in my sidebar. When viewing post pages with the comments block, the WMD editor took over my contact form textarea and left my comments textarea untouched (WMD, by default, plugs itself into the first textarea it finds on a page). Obviously, I needed it the other way around.

    Digging through the WMD readme I found a very simple solution – in any textarea you want ignored by WMD, give that textarea a class of wmd-ignore. WMD will skip that textarea and move on to the next.

    Thanks again bud. New theme for stylephreak will be up very shortly.

  9. Thanks Anthony, I added it to a FAQ in the post!

  10. Thanks for this Fantastic PlugIn.

  11. The download link is not working because of a missing dot between com and files.

    Thomas

  12. Thanks for the heads up, Thomas. Link is fixed. :D

Trackbacks

Leave a Reply