Adding a WYSIWYG Editor to your Django app.30 Jul 2015
One of the most useful features of Django is it’s admin interface. But the standard plain textarea is really hard to handle. So my first technical blog post will deal with adding a rich HTML editor to an existing django app.
Some of the common django based WYSIWYG editor apps are listed below.
In this post I will install and configure django-ckeditor.
Step 1: Install django-ckeditor app using pip.
pip install django-ckeditor
Step 2: Add ckeditor to INSTALLED_APPS in settings.py file.
Step 3: Add the following lines to your settings file.
CKEDITOR_UPLOAD_PATH = "uploads/" CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'
Step 4: Update your project’s urls.py file with the below line.
Step 5: Modify your models.py file and change your model fields.
from ckeditor.fields import RichTextField class BlogPost(models.Model): author = models.CharFIeld(max_length=30) title = models.CharField(max_length=50) description = RichTextField() def __unicode__(self): return self.title
Step 6: Now run the following django commands.
python manage.py makemigrations python manage.py migrate python manage.py collectstatic python manage.py runserver
Done. Now open up your browser and go to the link 127.0.0.1:8000/admin. Log in to the admin account using your superuser name and password.
Finally try to create a new post using the newly added WYSIWYG editor.