Replace textarea with rich text editor in Django Admin?

Question

I would like to know the best way to replace a standard textarea field with a rich text editor in Django Admin?

score 31 · Answer 1 · answered Dec 01 '08 at 05:12

31

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.

answered Dec 01 '08 at 05:12

mshroyer

1,928
17
14

score 14 · Answer 2 · answered Dec 03 '08 at 13:34

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() ;
    });
});

score 12 · Answer 3 · edited Jun 25 '12 at 12:43

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.

score 8 · Answer 4 · edited May 23 '17 at 12:17

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/

score 2 · Answer 5 · answered Mar 09 '10 at 20:31

2

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.

answered Mar 09 '10 at 20:31

let's wait for the v3 (maybe standalone of grappelli).. meanwhile i got the bundle working with http://code.google.com/p/django-filebrowser/source/browse/branches/filebrowser3-no-grappelli/ and django-tinymce-1.5.tar.gz (latest release at this time) with this hack http://code.google.com/p/django-tinymce/issues/detail?id=40 eh. – Mar 10 '10 at 03:30

score 2 · Answer 6 · edited Nov 21 '16 at 02:13

2

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.

edited Nov 21 '16 at 02:13

Philipp Zettl

177
1
3
17

answered Apr 23 '10 at 02:42

FernandoEscher

2,940
2
28
27

score 2 · Answer 7 · answered Feb 19 '22 at 17:37

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.

score 2 · Answer 8 · edited Aug 27 '14 at 10:15

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)

Replace textarea with rich text editor in Django Admin?

8 Answers8

Linked