Jak dodać edytor WSYWYG do administratora Django?

Question

Jaki jest najprostszy sposób dodania edytorów WSYISWG do panelu administracyjnego na blogu django?

Answer 1

Można używać TinyMCE pośrednictwem Django TinyMCE:

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

Można użyć TinyMCE na każdym polu tekstowym lub Charfield w admin, lub można po prostu dodać do poszczególnych dziedzin.

W przypadku pierwszego z nich należy ustawić każdy CharField lub TextField, aby użyć tinymce, korzystając z ustawień modelu administratora admina formfield_overides. Tak więc w twoim admin.py:

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

Dla tego ostatniego zmieniasz widżet dla pola, w którym chcesz używać tinymce. Więc w forms.py:

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

a następnie poinformować administratora, by skorzystać z tego formularza (w admin.py):

from models import Blog 
from forms import BlogForm 

class BlogAdmin(ModelAdmin): 
    form = BlogForm() 

Answer 2

Trzeba zrobić kilka prostych rzeczy (jak np NicEdit WYSIWYG) :

1) pobierz potrzebny edytor i zapisz go w jakimś folderze w projekcie, powiedzmy w folderze mediów;

2) w urls.py dodać następujące wiersze:

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) utworzyć folderu 'admin' w folderze szablonów i skopiować tam plik base.py z django/contrib/admin/szablony/admin/podstawy .py;

4) otwarty plik base.py i edytować go w ten sposób - pierwsze 9 wierszy nie dotykają w ogóle, ale po 9 rzędzie dodać kolejny kod:

<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> 

To wszystko. Teraz w panelu administracyjnym we wszystkich tekstach będzie dostępny WYSIWYG.

Answer 3

Próbowałem wdrożyć rozwiązanie podane przez Vitali Ponomar.

wybiorę NicEdit ponieważ były tylko dwa pliki JavaScript (nicEdit.js i nicEditorIcons.gif), które mogę umieścić w moim folderze /media/js/ i nie wymaga, aby zmienić moje typy pól w modelu (widziałem w TinyMCE Documentation, który wymaga, aby zmienić pole do typu HTMLField i nie chciałem niczego zmieniać w bazie danych).

umieścić w modelu

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) 

Plik textarea_content.js że mogę umieścić w /media/js/ folderze również służy do zainicjowania specyficznej textarea z pewnych konkretnych przycisków jest:

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

Jednak jeśli planujemy użyć go do wszystkich tekstów, można użyć zamiast tego powyższego kodu pod numer bkLib.onDomLoaded(nicEditors.allTextAreas);.

Wreszcie, bądź ostrożny z uprawnieniami (kiedy próbowałem po raz pierwszy w środowisku produkcyjnym moje pliki javascript nie były dostępne z powodu uprawnień).