# How to add WYSIWYG (What You See Is What You Get) editor to Django Project?

**WYSIWYG** aka ***What You See Is What You Get*** is a very useful for the content rich websites, and by default Django Admin comes with a simple HTML text field. In this blog, we’ll add a **Rich Text Editor** (**WYSIWYG**) to our Django project.

We’ll use one of the best Rich text editors available for Django, which is `django-ckeditor`.

# Installation:

First install the package given below using `pip`.

```bash
pip install django-ckeditor
```

Now you have to add `django-ckeditor` in your `INSTALLED_APPS` list in your `settings.py` file.

```python
...

INSTALLED_APPS = [
	...
	'ckeditor_uploader',
	'ckeditor',
]

...
```

Congratulations, you are ready to set up the configuration of `ckeditor`.

# Configuration:

`django-ckeditor` comes with so many features, but to enable them fully, you have to add some configurations in your Django’s `settings.py` file.

```python
CKEDITOR_UPLOAD_PATH = "uploads/"

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'width': '100%',
        'toolbar_Custom': [
            ['Styles', 'Format', 'Bold', 'Italic', 'Underline',
                'Strike', 'SpellChecker', 'Undo', 'Redo'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Table', 'HorizontalRule'],
            ['TextColor', 'BGColor'],
            ['Smiley', 'SpecialChar'], ['Source'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['NumberedList', 'BulletedList'],
            ['Indent', 'Outdent'],
            ['Maximize'],
        ],
        'autoParagraph': False,
        'enterMode': 2,
    }
}
```

The final step of the configuration is to add the below code in your root `urls.py` file.

```python
...

urlpatterns.extend(
    [path('ckeditor/', include('ckeditor_uploader.urls')),]
)
```

Congratulations, your Rich Text Editor setup is completed, now you are ready to add it in your project or in Admin.

# Add WYSIWYG in Django Admin:

Yes, you heard it right, you can add this Rich Text Editor to your Model admin as well, you just have to add `formfield_overrides` in your Model Admin something like this, this will override the default `TextFIeld` widget of the Django admin form for that particular model.

```python
from django import admin
from django.contrib import admin
from ckeditor.widgets import CKEditorWidget

@admin.register(MyModel)
class MyModelAdmin(admin.ModelAdmin):
	...
	formfield_overrides = {
		models.TextField: {'widget': CKEditorWidget},
	}
```

# Add WYSIWYG in a Model Form:

```python
from django import forms
from ckeditor.widgets import CKEditorWidget

from myapp.models import MyModel

class MyModelForm(forms.ModelForm):
	text = forms.CharField(widget=CKEditorWidget())
	class Meta:
		model = MyModel
		fields = '__all__'
```

# Add WYSIWYG in a Django Form:

```python
from django import forms
from ckeditor.widgets import CKEditorWidget

class MyForm(forms.Form):
	text = forms.CharField(widget=CKEditorWidget())
```

That’s it for today, will met you in the next crispy blog.

***Any thoughts? Write it down in the comments.***

> For more such crispy blogs daily, follow Dev.Junction, subscribe to our newsletter and get notified.
> 

## Social Links

- **LinkedIn:** [https://www.linkedin.com/in/mnamegaurav/](https://www.linkedin.com/in/mnamegaurav/)
- **YouTube:** [https://www.youtube.com/devjunction](https://www.youtube.com/devjunction)
- **Website:** [https://gaurav.devjunction.in/](https://gaurav.devjunction.in/)
- **GitHub:** [https://github.com/mnamegaurav](https://github.com/mnamegaurav)
- **Instagram:** [https://www.instagram.com/mnamegaurav/](https://www.instagram.com/mnamegaurav/)
- **Twitter:** [https://twitter.com/mnamegaurav](https://twitter.com/mnamegaurav)