[Django]-Replace textarea with rich text editor in Django Admin?

There’s an add-on Django application to provide TinyMCE support for Django admin forms without having to muck around with admin templates or Django newform internals.

Take a look on this snippet – basic idea is to include custom JS in your admin definitions which will replace standard text areas with rich-text editor.

For jQuery/FCKEditor such JS could look like that:

$(document).ready(function() {
    $("textarea").each(function(n, obj) {
        fck = new FCKeditor(obj.id) ;
            fck.BasePath = "/admin-media/fckeditor/" ;
            fck.ReplaceTextarea() ;
    });
});

I’d say: define your own ModelAdmin class and overwrite the widget used for particular field, like:

class ArticleAdminModelForm(forms.ModelForm):
    description = forms.CharField(widget=widgets.AdminWYMEditor)

    class Meta:
        model = models.Article

(AdminWYMEditor is a forms.Textarea subclass that adds WYMEditor with configuration specific to Django admin app).

See this blog post by Jannis Leidel to see how this widget can be implemented.

At the date of the post and the answers TinyMCE was quite popular (as it probably remains today).
But after some time ckeditor has appeared and many consider that a better alternative, including many SO users:

Compare TinyMCE and CKeditor for a Wiki

http://www.turnkeylinux.org/blog/tinymce-vs-ckeditor

There is also a 2013 review of WISIWYG editors with Django in Russian:

http://habrahabr.ru/company/htdt/blog/202782/

Currently the most straight forward way to use tinymce in django admin is to use Grappelli.

http://code.google.com/p/django-grappelli/

Grappelli is also a requirement for django-filebrowser so if you want the whole shebang you will gotta need it anyways.

Ok, to update a little this post, I would say that the easiest way to implement TinyMCE is to use the django-tinymce app. You must also download the JS files from the TinyMCE page. I got some errors with the django intenationalization, but downloading the laguage packs from the TinyMCE must be enough.

class KindEditor(forms.Textarea):
    class Media:
        css ={
            'all':(settings.STATIC_ROOT + 'editor/themes/default/default.css',)
        }
        js = (settings.STATIC_ROOT + 'editor/kindeditor-min.js',settings.STATIC_ROOT + 'editor/lang/zh_CN.js',)
    def __init__(self):
        attrs = {}
        attrs['rel'] = 'kind'
        super(KindEditor, self).__init__(attrs)


class NewsAdminForm(forms.ModelForm):
    pass

    class Meta:
        model = News
        widgets = {
            'body':KindEditor()
        }

class NewsAdmin(admin.ModelAdmin):
    form = NewsAdminForm


admin.site.register(News, NewsAdmin)

Install this package

pip install django-ckeditor

then run these commands to migrate.

python manage.py makemigrations
python manage.py migrate
python manage.py collectstatic

finally restart your Django server.

Once you complete the above steps, you can see the rich text editor in your admin panel fields.