The best free WYSIWYG editor for your Django site in 2025

WYSIWYG simply means What you see is what you get. So a WYSIWYG editor simply allows you to write your content in the way you want to see it without worrying about the HTML code and the editor simply generates the HTML code that needs to show it as you saw it.

I made myself a personal website with Django and I wanted to add a my own blogging platform to that website and after creating all the models and views I started to look for a WYSIWYG editor. Three years ago, I made a blogging website as a Django practice project and I used the package django-ckeditor as the WYSIWYG editor for that project. 

Why not django-ckeditor?

But unfortunately, I found out that due to some changes to CkEditor's license, it's no longer supported and it gives you warnings if you use it with your Django project.

Martor - django-markdown-editor

So, I tried two editors, one is called martor also known as django-markdown-editor which you can easily install with a pip command 

pip install martor

However, martor is a markdown based WYSIWYG editor, which is really good if you don't need to much more advanced things like embedding custom iframes. However, it allows you to embed videos from YouTube seamlessly and also gives the option to upload images and use them inside your editor. Even though martor is supposed to allow the user to upload the images to Imagur, I couldn't find the API support from the Imagur side and I believe their API is not available anymore. 

When you use martor for your project you have to use the special fields provided by martor and use their special template filters when rendering them.

I recommend django-summernote.

As I was not happy that I have to use a markdown based WYSIWYG editor, I kept looking for another editor and then I found django-summernote. django-summernote package integrates the popular Summernote editor to Django projects. As usual all you can install it using a simple pip command.

pip install django-summernote

The most special thing I see in this package is that you don't have to use any special fields to use this. You just have to use a models.TextField() inside your model and that's it. You also don' t have to use any special template filters to render the content and all you have to use it django's built in safe filter when you render the content.

But when you register the model in the admin site, you have to use a custom model admin so we can use the editor in the admin site without any issue. But that process is really simple and well documented in the package's GitHub repository: https://github.com/lqez/django-summernote 

Here is how I did it.

Create the model admin as a sub class of SummernoteModelAdmin

from django_summernote.admin import SummernoteModelAdmin
# Register your models here.

class ArticleModelAdmin(SummernoteModelAdmin):
    summernote_fields = ('body',)  

And register your model with that custom model admin.

admin.site.register(Article, ArticleModelAdmin)

That's all you have to do and here is an example how I rendered the content.

<article class="w-full md:w-3/4">
        <div
          class="prose prose-invert max-w-none
                 prose-p:text-neutral-300
                 prose-headings:text-neutral-100
                 prose-a:text-blue-400 hover:prose-a:text-blue-300
                 prose-code:bg-neutral-800 prose-code:px-1 prose-code:rounded
                 prose-blockquote:border-l-blue-500
                 prose-blockquote:text-neutral-300"
        >
          {{ article.body|safe }}
        </div>
      </article>

That's all and you have a WYSIWYG editor for your project.

Update: Rendering the content with different stylesheet.

I found out that if you use a framework or another stylesheet for the page on which you render the summernote content, you might not be able to see the content as you need because the stylesheets conflict with each other. 

So what I did is I put a simple CSS stylesheet for the summernote content, and wrapped the summernote content with a div element with the class "summernote-content"

<article class="w-full md:w-3/4">
        <div class="summernote-content">
  {{ article.body|safe }}
</div>
      </article>

and linked the stylesheet using the following line

{% block css %}<link rel="stylesheet" href="{% static 'css/summernote-content.css' %}">{% endblock %}

and placed the summernote-content.css inside my static file folder.

Here is the stylesheet I used

https://gist.github.com/chamodhk/a016678f3e3d15c21b5d1199fe2d882e 

And that's all. You are good to go.

Hope you learnt something useful and let's meet with another article.

Happy building : )