Building Django application with WYSIWYG editor in Admin panel
Wanna build your own blog with articles writing opportunity? Yes, its possible! Today we're build Django based blog application with WYSIWYG editor in Admin panel. It very fast for developing.
Create new Django project or open exist, then create application inside named as blog:
django-admin startapp blog
In blog/models.py file add Model for storing your posts and articles:
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=1024)
content = models.TextField(blank=True, null=True)
created = models.DateTimeField(auto_now_add=True)
updated = models.DateTimeField(auto_now=True)
def __str__(self):
return '%s' % (self.title)
class Meta:
verbose_name = 'Article'
verbose_name_plural = 'Articles'
For displaying in Admin panel your Model need registration. Do it in blog/admin.py file:
from django.contrib import admin
from .models import Article
class ArticleAdmin(admin.ModelAdmin):
list_display = ('id', 'title', 'created', 'updated')
search_fields = ('id', 'title', 'content', 'created', 'updated')
admin.site.register(Article, ArticleAdmin)
Migrations read models.py file and create tables in database, where your entries will be stored. Create migrations and migrate:
python manage.py makemigrations blog
python manage.py migrate
To view changes run Django's server:
python manage.py runserver
Open browser by http://127.0.0.1:8000/admin/ url and authenticate with credentials, created with createsuperuser. Open Articles section, try to create new Article. So far content field is naked:
Update blog/admin.py file with Summernote's assets from jsDelivr CDN:
from django.contrib import admin
from .models import Article
class ArticleAdmin(admin.ModelAdmin):
list_display = ('id', 'title', 'created', 'updated')
search_fields = ('id', 'title', 'content', 'created', 'updated')
class Media:
css = {
'all': [
'https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-lite.min.css',
'css/editor.css',
],
}
js = [
'https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-lite.min.js',
'admin/js/jquery.init.js',
'js/editor.js',
]
admin.site.register(Article, ArticleAdmin)
The time has come for WYSIWYG editor activation. Configure STATIC_ROOT for your project. Create in static/js/ path editor.js file. This file need for activating editor with Django's built-in jQuery. The code:
django.jQuery(function($) {
$('#id_content').summernote({
width: '100%',
height: 500
});
});
Now blog ready for managing your posts:
Support me on Patreon
#backend #blog #database #django #django-admin #django-model #django-textfield #django-view #editor #integration #summernote #wysiwyg
