Integrating Rich Text Editor with Django
Tags: django, webdev
Published: 2022-01-07 09:37:09

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyjz1moc45v3cimjsq71.png)
 
**C**reating blogs or article-based tutorials is one of the main aims of every web developer after successful deployment of a website. While it is not easy to create a text editor from scratch using JavaScript, it is certainly possible to make use of well-developed open source text editors. So, in this blog we will be integrating "ck editor" with Django.


Before we move on, I am assuming that all of the following pre-requisites are satisfied:
* A thorough understanding of model forms in Django
* Form rendering in template
* Data models
* Python and Django already installed in system


Alright! So, with the basics covered, let us quickly learn how to integrate "ck editor" with Django. For the sake of simplicity, I have presented the steps with lucrative code examples.
**Step 1**
In order to use the features of "ck editor", we first must need to install it. The installation is simple: Just execute the below command in the terminal of your Operating System. 

```
pip install django-ckeditor
```
In a span of 2-3 minutes, the "ck-editor" would be installed. If it does not, don't worry! Try once again.

**Step 2**
It's time to create a new Django project or to open an existing Django project. Once, you are inside the project look for the **setting.py** file inside the project folder. Inside the file, again, look for a list named "INSTALLED_APPS". Just like adding a new app in the list, add "ckeditor" to the list.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujoj6ora1qfd1m7mekv8.png)
 

**Step 3**
Now navigate to the **views.py** file inside the app folder where you wish to include "ck-editor". Inside the **views.py** file, create a model form linked to one of the models in the **models.py** file. For instance, I have created a model form named "ArticleForm".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxczs5i8ezaqczm1mgz6.png)

**Step 4**
In the same **views.py** file, inside one of the views where you wish to display the "ck editor", use the model form which you created in the previous step and pass the form to the template through a variable using the render method.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nse9u4j3l3mjjb0fouu3.png)
Using the `form()` method, I have created a new `ArticleForm` and then assigned it to a variable simply named "form". At last, I have passed the form to the template **create.html** as `myForm`.

**Step 5**
Now, we have to decide which field of the form has to be given the "ck editor" features. To do this, open the **models.py** file inside the app folder in which you wish to add the "ck editor" features. Locate the model and hence, the required field. To this field, assign the `RichTextField()` attribute. Make sure to import `RichTextField()`.

    from ckeditor.fields import RichTextField
    class Article(models.Model):
        title = models.CharField(max_length=300)
        user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="creator")
        datePosted = models.CharField(max_length=20, default="")
        timePosted = models.CharField(max_length=20, default="")
        category = models.CharField(max_length=300)
        content = RichTextField(null=True, blank=True, 
        config_name="special", external_plugin_resources=[(
        'youtube', '/static/shareledge/ckeditor-plugins/youtube/youtube/', 'plugin.js',
        )])

In my case, I have used the field `content`. At this point of time, the use of `RichTextField(null=True, blank=True)` would suffice.

**Step 6**
This is the final step. Head over to the template where the form has to be rendered. We know that any form can be rendered in the template using
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziqphf59kgojt7ef50q0.png)
 
Since, in my case the form is passed as `myForm`, I will just render it using ```{{ myForm }}```. In order to add "ck editor" to the template, I will just have to add ```{{ myForm.media }}``` to the code.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bet2ka8tc8d0cxx4ze2q.png)
Of course, I will have to customize each field of the form according to my styling preferences. Part of this is shown below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkfi4nq159w2emprjyho.png)
 
That's it! We are done. If we open the webpage, we would be able to see the field rendered as "ck editor".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kd0igstf57a644qu4y0.png)
This field now inherits tons of features such as Bold, Italic, Line spacing, Image insertion, Font colour and much more.

Additionally, if we look at the admin interface the same field will use the "ck editor" features there itself too.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ia7hodjyvwjko5fncap.png)

So, that's it about this blog. I hope you find the information in this blog useful. Feel free to comment below anything related to the content.