views:

115

answers:

3

First off here is the code!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <link href="content/wmd.css" rel="stylesheet" type="text/css" />
    <title>some title </title>
</head>
<body>
    <div class="main">
        <form>
            <h2>Only teaxt area</h2>
            <div id="wmd-editor-uno" class="wmd-panel">
                <div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
                <textarea name='id-uno' id='id-uno'></textarea>
            </div>
        </form>
    </div>
    <script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
    <script type='text/javascript' src="Scripts/moowmd.js"></script>
    <script type="text/javascript">
        var MyConfig = [
     {
         input: 'id-uno',
         postfix: '-uno'
      }];
      window.addEvent('domready', function() {
          window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
          window.MyMooWMD.start();
      });
    </script>
</body>
</html>

Bam!

My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.

+1  A: 

The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.

Wrap the code in a function:

<script type="text/javascript">
    function loaded() {
        var MyConfig = [
        {
            input: 'id-uno',
            postfix: '-uno'
         }];
         window.addEvent('domready', function() {
             window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
             window.MyMooWMD.start();
         });}
</script>

Then add an onload handler to your body tag:

    <body onload="loaded();">

The onload handler will not fire until all the javascript, images, css, etc have loaded.

Devon_C_Miller
I had high hopes for this... but nope.
Aaron
A: 
 <head>
       <title>some title </title>
       <link rel="stylesheet" type="text/css" href="Content/wmd.css" />
       <script type="text/javascript" src="Scripts/showdown.js"></script>
     </head>
     <body>
        <div class="main">
            <div id="wmd-editor" class="wmd-panel">
                <div id="wmd-button-bar">
                </div>
                <textarea id="wmd-input"></textarea>
            </div>
            <div id="wmd-preview" class="wmd-panel">
            </div>
            <div id="wmd-output" class="wmd-panel">
            </div>
        </div>
        <script type="text/javascript" src="Scripts/wmd.js"></script>
    </body>

The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.

Aaron
Give it another try. IE bugs I could find where fixed.
Itay Moav
+1  A: 

The problem (for later generations) is IE does not accepts the following syntax:

{
   att1: 'value',
   att2: 'value'
}

Where other browsers do. I changed it to

{
   'att1': 'value',
   'att2': 'value'
}

And it is fine now. (using the mailing list would have gotten my attention earlier)

Itay Moav
Same problem it works in ff but not in IE.
Aaron
I downloaded the newest version and applied this change and it works. You Rock! This saves me a lot of time I have been trying to get Stackoverflow's branch to work with multiple instances on a page.
Aaron