HOW-TO: Use multiple WMD editors on a same page

WMD editor resembles Stackoverflow's Markdown editor and it's probably one of the best WYSIWYG editors that work with Markdown as input. Because of that, it's widely used in Stackoverflow clones (i.e. OSQA). It's easy to install and use (just tie it to a textarea), it supports the mostly used features, provided by this type of editors, but has 1 major flaw: It doesn't support multiple textareas/multiple editors per page.

I've been working on an OSQA based platform recently when I stumbled across this issue. Since we didn't want to change the editor completely, I had to improvise.

Javascript to the rescue!

Going through WMD's code, I found a way to re-initialize the editor with different textarea. When that goes through, the tool bar will be bound to the newly marked textarea and it will edit it's content. The fix is pretty simple actually (my example uses jQuery, but i'm sure you will understand what it does):

    $(".wmd-textarea").focus(function(){
            // Execute this when a textarea with a class .wmd-textarea gains focus

    $("#wmd-button-bar").prependTo($(this).parent("div")); // Prepend the toolbox to the parent div of the textarea

    Attacklab.panels.input = this; // Set WMD's textarea input to this textarea
    Attacklab.editor(); // Re-init the editor.
});

What this block does is hook a function to the focus event of the textarea. Each time the textarea gains focus, it prepends the toolbox to the input's parent element, sets it as the input and reinitializes the WMD editor. That simple.

If you don't want the toolbox to move -- i.e. you want a toolbox above each textarea, just paste the toolbox HTML as desired, point Attacklab.panels.buttonBar to the toolbox tied to the textarea with the focus on it, and re-init the editor:

    $(".wmd-textarea").focus(function(){
            // Execute this when a textarea with a class .wmd-textarea gains focus

    $("#wmd-button-bar").prependTo($(this).parent("div")); // Prepend the toolbox to the parent div of the textarea
    Attacklab.panels.buttonBar = $(this).parent("div").find(".wmd-toolbox"); // Set WMD's textarea toolbox
    Attacklab.panels.input = this; // Set WMD's textarea input to this textarea
    Attacklab.editor(); // Re-init the editor.
});

Note The above code blocks would work with this markup:

<!-- HAVE A WMD EDITOR INITIALIZED SOMEWHERE IN YOUR HTML -->
<div>
        <div class="wmd-toolbox"><!-- HERE GOES TOOLBOX HTML - ONLY FOR PRESENTATION - REMOVE ID'S. COPY IT FROM YOUR FULLY RENDERED PAGE SOURCE. --></div>
        <textarea class=".wmd-textarea"></textarea>
</div>
<div>
        <div class="wmd-toolbox"><!-- HERE GOES TOOLBOX HTML - ONLY FOR PRESENTATION - REMOVE ID'S. COPY IT FROM YOUR FULLY RENDERED PAGE SOURCE. --></div>
        <textarea class=".wmd-textarea"></textarea>
</div>

JqCarousel Three-D

This plugin was coded to prove a point. We saw another similar plugin like this, but it was only for sale with obfuscated code, so I decided to write it and opensource it. It doesn't have the limited functionality and the custom implementation of the paid ones, it is ...

Livescape jQuery Live Landscape

The idea behind this plugin is to have some kind of landscape container that will contain objects moving inside of it e.g. sky with the clouds moving. The plugin is built simple, has simple implementation, it is very easy to use, yet very flexible. You only need the landscape ...

Other articles

blogroll

social