Replace textarea with rich text editor in Django Admin?

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

Asked by: Andrew121 | Posted: 28-01-2022

Answer 1

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 by: Elian547 | Posted: 01-03-2022

Answer 2

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

Answered by: Brooke641 | Posted: 01-03-2022

Answer 3

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.

Answered by: Briony265 | Posted: 01-03-2022

Answer 4

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/

Answered by: Sawyer401 | Posted: 01-03-2022

Answer 5

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 by: Dainton517 | Posted: 01-03-2022

Answer 6

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)

Answered by: John874 | Posted: 01-03-2022

Answer 7

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.

Answered by: Grace484 | Posted: 01-03-2022

Answer 8

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.

Answered by: Kellan776 | Posted: 01-03-2022

Still can't find your answer? Check out these communities...

top