CODEWITHSUNDEEP
djangoblogswysiwyg
Adnan
Adnan

Reputation: 3337

How can I add a WSYWYG editor to Django admin?

What is the most simplest way to add a WSYISWG editors to admin panel on a django blog?

Upvotes: 9

Views: 18538

Answers (3)

mauronet
mauronet

Reputation: 890

I tried to implement the solution given by Vitali Ponomar.

I choose NicEdit because it were just two javascript files (nicEdit.js and nicEditorIcons.gif) that I put in my /media/js/ folder and doesn't require to change my field types in the model (I saw in TinyMCE Documentation that requires to change the field to a HTMLField type and I didn't want to change anything in the database).

I put in the model:

class NewsAdmin(admin.ModelAdmin):
    list_display = ('title','lead','date')
    class Media:
        js = ('/media/js/nicEdit.js', '/media/js/textarea_content.js')

admin.site.register(News, NewsAdmin)

The file textarea_content.js that I put in /media/js/ folder also is used to initialize an specific textarea with some specific buttons is:

bkLib.onDomLoaded(function() {
nicEditors.editors.push(
    new nicEditor({iconsPath : '/media/js/nicEditorIcons.gif',
        buttonList : ['fontSize','fontFamily','bold','italic',
            'underline','strikeThrough','left','center','right','justify',
            'ol','ul','subscript','superscript','hr','link','unlink','forecolor']
    }).panelInstance(
        document.getElementById('id_content')
    )
);
});

However if you are planning to use it for all textareas you can use bkLib.onDomLoaded(nicEditors.allTextAreas); instead the above code.

Finally, be carefull with permissions (when I tried first time in production environment my javascript files were nor available because of permissions).

Upvotes: 3

Vitalii Ponomar
Vitalii Ponomar

Reputation: 10936

You need to do few simple things (NicEdit WYSIWYG as example):

1) download needed editor and save it in some folder in your project, lets say in media folder;

2) in urls.py add next lines:

import os

PROJECT_DIR = os.path.dirname(__file__)

urlpatterns = patterns('',
    ...,
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': PROJECT_DIR + r'/media/'}),
    ...,
)

3) create folder 'admin' in templates folder and copy there file base.py from django/contrib/admin/templates/admin/base.py;

4) open file base.py and edit it that way - first 9 rows do not touch at all, but after 9th row add next code: 

<script type="text/javascript" src="/media/nicedit/nicEdit.js"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function() {
        nicEditors.allTextAreas({iconsPath : '/media/nicedit/nicEditorIcons.gif',
            buttonList : ['fontSize','fontFamily','bold','italic',
                'underline','strikeThrough','left','center','right','justify',
                'ol','ul','subscript','superscript','hr','link','unlink','forecolor',
                'image','upload','xhtml']
        });
    });
</script>

That's all. Now in admin panel in all textareas there will be available your WYSIWYG.

Upvotes: 9

Timmy O&#39;Mahony
Timmy O&#39;Mahony

Reputation: 53971

You can use tinymce via django-tinymce:

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

You can either use tinymce on every single textfield or charfield in the admin, or you can just add to particular fields.

For the former, youset every CharField or TextField to use tinymce by using the formfield_overides admin model settings. So in your admin.py:

formfield_overrides = {
    models.TextField: {'widget': TinyMCE(attrs={'cols': 80, 'rows': 30})},
}

For the latter you change the widget for the field you want to use tinymce on. So in your forms.py:

class BlogForm(ModelForm):
    body = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))

and then tell the admin to use this form (in admin.py):

from models import Blog
from forms import BlogForm

class BlogAdmin(ModelAdmin):
    form = BlogForm()

Upvotes: 12

Related Questions