How to Embed Code and Images in a Blog Post

Question

I'm trying to teach myself Django, by creating a personal blog. At the moment I have a Post class in my models, that stores the body as a TextField . Similar to

class Post(models.Model):

    title = models.CharField(max_length=150)
    body = models.TextField()
    author = models.ForeignKey(Author, related_name='blog_posts')
    published = models.DateTimeField(default=timezone.now)
    slut = models.SlugField(max_length=100, unique_for_date='publish')

Which does 90% of what I want.

What I want to be able to do though, is include things in the body of the post that aren't text. Specifically images, and code snippets.

How can I achieve that? Is there a data type that I can use? Or some other way?

Answer 1

You can integrate a rich text editor into Django (incl. Django admin). I'd recommend CKEditor because it's nice, but there's a lot out there.

The easiest way to add images to your posts is to upload them somewhere else (eg imgur) and just embed them inline into your posts with the rich text editor you choose.

If you want to allow image uploads within Django, the easiest way to do this is to create another model that you can associate to your posts, eg

class Image(models.Model):
    image = ImageField()
    post = models.ForeignKey('yourapp.Post')

And expose this using an inline admin (docs elaborates on this).

Then in your template, you can just iterate over the images:

{% for image in post.image_set.all %}
    <img src="{{ image.image.url }}" />
{% endfor %}

This of course means that images aren't inline with your post's textual content - they'd only be spat out before / after the post.

Adding functionality to upload images within Django and embed them inline is beyond the scope of this conversation as a few design decisions would have to be made.

Answer 2

我用django-summernote很好。

Answer 3

There is a bad solution that would be to use the safe filter in your template, this filter deactivates HTML escaping :

{{ code | safe }}

But that is a bad practice because :

• Anyone who can edit could put some malicious code in it.
• It makes "breaking" your page's code easy if you make a typo, a mistake.

It's worth knowing that it exists, but I'd recommend you to not use that

A better solution...

... would be to use some django-markdown package that would interpret markdown code and convert it into safe HTML code.

Here is why:

• Markdown is a light and simple syntax to format text. It can also be useful even in a non-djangoist context. (If you're not familiar with it, DuckDuckGo provides a nice cheatsheet for this language)
• Using a markdown interpreter won't break the code of your page.
• Integrating your markdown in your templates would then probably be as simple as safe filter without the cons (It would probably be something like {{ code | markdown }} ).

Both django-markdown2 and django-markdownx would probably fit your needs, but if it doesn't feel free to try an other!

You should not have trouble to find one that support images or code snippets.