How to add markdown editor to custom django comment?

Question

I am new to django and created a simple blog app and now try to add markdown to the comments:

Here is the model for comment:

class Comment(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    author = models.CharField(max_length=60)
    body = models.TextField()
    post = models.ForeignKey(Blog)

    def __unicode__(self):
        return unicode("%s: %s" % (self.post, self.body[:60]))

in the post.html, I have:

<!-- Add Comments  -->

    {% if user.is_authenticated %}
        <div id="addc">Your Comment?</div>
        <!-- Comment form  -->
        <form action="{% url "blog.views.add_comment" post.id %}" method="POST">{% csrf_token %}
            <div id="comment-form">
                <p>{{ form.body }}</p>
            </div>
            <div id="submit"><input type="submit" value="Submit"></div>
        </form>
    {% endif %}

and the views that renders post(and comment):

def post_withslug(request, post_slug):
    post = Blog.objects.get(slug = post_slug)
    comments = Comment.objects.filter(post=post)
    d = dict(post=post, comments=comments, form=CommentForm(), user=request.user)
    d.update(csrf(request))
    return render_to_response("blog/post.html", d)

in form.py I have:

from django_markdown.widgets import MarkdownWidget

class CommentForm(forms.ModelForm):
    body = forms.CharField(widget=MarkdownWidget())
    class Meta:
        model= Comment
        fields= ('body',)

I have used django-markdown for admin backend and it works fine there however I'm not sure how to apply this app (or something else to the same effect) to the blog comments and I could not find any tutorial about it. So I appreciate your help.

Do you want to use the markdown editor for comments or just for the markdown to properly displayed? — Enrico, Feb 09 '14 at 20:35
I want to add markdown editor, so that users can decorate their comment with basic html tags. — supermario, Feb 09 '14 at 20:36
You don't need to editor for comments to contain markdown; the editor just adds markdown for users that don't know how to do it themselves. For instance, Stackoverflow comments support markdown, but don't use an editor. — Enrico, Feb 09 '14 at 20:38
Well I assume most of my users don't know how to use markdown directly hence the need for the editor/buttons. — supermario, Feb 09 '14 at 20:40

score 2 · Accepted Answer · answered Feb 09 '14 at 20:46

2

You need to write a custom form for your Comment model

comments/forms.py

from django_markdown.widgets import MarkdownWidget
...
class CommentForm(forms.Form):
    body = forms.CharField( widget=MarkdownWidget() )

The markdown widget handles adding the necessary js and css for the editor to the page, assuming you are not explicitly defining your resources in your template, but your form or view will need to associate the comment with the right post and user.

On the display side, you will need to use the markdown templatetag when displaying your comments

comments/templates/comment.html

{% load django_markdown %}
...
{{ comment.author }} //etc
{{ comment.body|markdown }}

answered Feb 09 '14 at 20:46

Enrico

10,377
8
44
55

I follwoed your guide, run collectstatic and restarted the webserver, but nothing added to the comment form. I get no error either. Also direct markdown on comment form does not have any effect. What may I have been missing? – supermario Feb 09 '14 at 21:01
Are you using your custom form in your view? – Enrico Feb 09 '14 at 21:06
Yes I updated the question with the relevant parts of views.py and form.py. – supermario Feb 09 '14 at 21:15
Apparently, you also need to include the form media in your page. See this answer - http://stackoverflow.com/a/1559034/44816 – Enrico Feb 09 '14 at 23:56
Did adding `form.media` to your page fix it? – Enrico Feb 10 '14 at 16:45

How to add markdown editor to custom django comment?

1 Answers1