Come posso aggiungere un editor WSYWYG all'amministratore di Django?

Question

Qual è il modo più semplice per aggiungere un editor WSYISWG al pannello di amministrazione su un blog di django?

Answer 1

È possibile utilizzare TinyMCE tramite django-TinyMCE:

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

È possibile utilizzare tinymce su ogni singolo campo di testo o Charfield in admin, oppure si può semplicemente aggiungere a particolari settori.

Per il primo, utilizzare ogni campo di testo o campo di testo per utilizzare tinymce utilizzando le impostazioni del modello di amministrazione formfield_overides. Quindi nel tuo admin.py:

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

Per questi ultimi si cambia il widget per il campo che si desidera utilizzare TinyMCE su. Quindi nel tuo forms.py:

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

e poi dire l'amministratore di utilizzare questa forma (in admin.py):

from models import Blog 
from forms import BlogForm 

class BlogAdmin(ModelAdmin): 
    form = BlogForm() 

Answer 2

Hai bisogno di fare alcune cose semplici (NicEdit WYSIWYG come esempio) :

1) scaricare l'editor necessario e salvarlo in una cartella del progetto, diciamo nella cartella dei media;

2) in urls.py aggiungere righe successive:

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) creare la cartella 'admin' nella cartella dei modelli e ci copia di file base.py da Django/contrib/admin/templates/admin/base .py;

4) File base.py aprire e modificare in questo modo - primi 9 righe non si toccano a tutti, ma dopo 9 ° fila aggiungere codice successivo:

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

Questo è tutto. Ora nel pannello di amministrazione in tutte le textareas sarà disponibile il tuo WYSIWYG.

Answer 3

Ho cercato di implementare la soluzione proposta da Vitali Ponomar.

scelgo NicEdit perché erano solo due file JavaScript (nicEdit.js e nicEditorIcons.gif) che ho messo nella mia cartella /media/js/ e non richiede di cambiare i miei tipi di campo nel modello (che ho visto in TinyMCE Documentation che richiede di modificare il campo a un tipo HTMLField e non volevo modificare nulla nel database).

ho messo nel modello:

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) 

Il file textarea_content.js che ho messo in /media/js/ cartella viene anche usato per inizializzare un textarea specifico con alcuni pulsanti specifici è:

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

Tuttavia, se si stanno progettando di usarlo per tutti i textareas è possibile utilizzare bkLib.onDomLoaded(nicEditors.allTextAreas); invece del codice precedente.

Infine, fai attenzione con le autorizzazioni (quando ho provato la prima volta in ambiente di produzione i miei file javascript non erano disponibili a causa delle autorizzazioni).