WMD Preview Doesn't Match Output

Question

I am using WMD in a google app situation whereby the site administrator can update the pages of the site and the users see the information.

The preview function is working fine and I can see the text the way I want it to appear, but when I am in the users section, the markdown is being returned without the formatting - how can i fix this?

This is the code i am using

{% block content-left %}
            {% if is_admin %}
            <div id="content-bodyleft" class="wmd-preview"></div>
            <form action="/admin/content/" method="post">
                <textarea id="markdown" name="markdown" style="width: 400px; height: 200px;" >{{ page_content.html }}</textarea>
                <input name="page" type="hidden" value="{{ request.path }}" />
                <input type="submit" name="Save" />
            </form>
<div class="wmd-output"></div>
            <script type="text/javascript">
                // to set WMD's options programatically, define a "wmd_options"
                // object with whatever settings
                // you want to override.  Here are the defaults:
                wmd_options = {
                    // format sent to the server.  Use "Markdown" to return the markdown source.
                    output: "Markdown",

                    // line wrapping length for lists, blockquotes, etc.
                    lineLength: 40,

                    // toolbar buttons.  Undo and redo get appended automatically.
                    buttons: "bold italic | link blockquote code image | ol ul heading hr",

                    // option to automatically add WMD to the first textarea found.
                    // See apiExample.html for usage.
                    autostart: true
                };
            </script>
<div class="wmd-output"></div>
            <script type="text/javascript" src="/static/wmd/wmd.js"></script>
            {% else %} 

{{ page_content.html|markdown }}

           {% endif %}

Answer 1

This doesn't appear to have anything to do with WMD.js, which is an editor and has nothing to do with displaying the content.

You don't post your models, but it looks like you are entering content into the "markdown" field, but displaying a different field, "html". I presume you have something in your models - maybe on save - that populates that html field with the converted markup?

Also are you sure you're seeing raw markdown, or are you seeing raw HTML? I would assume you would need to unescape the html output:

{{ page_content.html|safe }}

Answer 2

This is my models.py file

# models.py
from google.appengine.ext import db

class GoogleToken(db.Model):
    session_token = db.StringProperty()
    scope_url = db.StringProperty()
    added_on = db.DateTimeProperty(auto_now_add=True)

class PageContent(db.Model):
    html = db.TextProperty()
    page = db.StringProperty()

class PageMedia(db.Model):
    name = db.StringProperty()
    type = db.StringProperty()
    content = db.BlobProperty(default=None)

class Announcement(db.Model):
    title = db.StringProperty()
    content = db.TextProperty()
    added_on = db.DateTimeProperty(auto_now_add=True)

and this is from views.py

def content(request):
    html = request.POST.get('markdown', None)
    page = request.POST.get('page', None)

    logging.debug(html)
    logging.debug('Page: %s' % page)

    query = PageContent.all().filter('page =', page)
    page_content = query.get()
    if page_content == None:
        page_content = PageContent(html=html,page=page)
    else:
        page_content.html = html

To help you understand what is happening, for example I am typing

Title
----
*Subtitle*

Text text text 

and seeing

Title

Subtitle

Text text text

in preview, but on output i am seeing

Title----*Subtitle*Text text text 

Thanks, I do appreciate your help with this.

Answer 3

The reason this is happening is because the Django Form is only seeing the value of the <textarea> tag that represents WMD editor. That value is the actual markdown, not the rendered HTML that you see in the preview.

There are several ways to fix this, on either the client or the server...

1. When the form is saved, convert the markdown to HTML on the server using a python markdown module, like this one

2. When the form is submitted on the client, have javascript replace the value of the WMD <textarea> tag to the actual HTML

Option #1 is probably the easiest. Here's some sample code...

import markdown

class MyModel(models.Model):
    text = models.TextField()

    def save(self, force_insert=False, force_update=False):
        if self.text:
            self.text = markdown.markdown(self.text)

        super(MyModel, self).save(force_insert, force_update)