Как я могу добавить редактор WSYWYG для администратора Django? - PullRequest
Новая
       21

Как я могу добавить редактор WSYWYG для администратора Django?

7 голосов
/ 30 октября 2011

Какой самый простой способ добавить редакторы WSYISWG в панель администратора блога django?

Ответы [ 3 ]

10 голосов
/ 30 октября 2011

Вы можете использовать tinymce через django-tinymce:

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

Вы можете использовать tinymce для каждого отдельного текстового поля или поля char в админке, или вы можете просто добавить в определенные поля,

В первом случае для каждого CharField или TextField необходимо использовать tinymce, используя formfield_overides настройки модели администратора.Так в вашем admin.py:

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

Для последнего вы меняете виджет для поля, на котором вы хотите использовать tinymce.Итак, в вашем forms.py:

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

, а затем попросите администратора использовать эту форму (в admin.py): 

from models import Blog
from forms import BlogForm

class BlogAdmin(ModelAdmin):
    form = BlogForm()
9 голосов
/ 31 октября 2011

Вам нужно сделать несколько простых вещей (например, NicEdit WYSIWYG):

1) скачать необходимый редактор и сохранить его в какой-нибудь папке в вашем проекте, скажем, в папке media;

2) в urls.py добавьте следующие строки: 

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) создайте папку 'admin' в папке шаблонов и скопируйте туда файл base.py из django / contrib / admin / templates / admin / base.py;

4) откройте файл base.py и отредактируйте его таким образом - первые 9 строк вообще не соприкасаются, но после 9-й строки добавьте следующий код: 

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

Вот и все.Теперь в админ-панели во всех текстовых областях будет доступен ваш WYSIWYG.

1 голос
/ 21 сентября 2014

Я пытался реализовать решение, данное Виталием Пономаром.

Я выбрал NicEdit , потому что это были только два файла javascript (nicEdit.js и nicEditorIcons.gif), которые я поместил в свою папку /media/js/ и не требует изменения типов полей в модели (Я видел в Документация TinyMCE , в которой требуется изменить поле на тип HTMLField, и я не хотел ничего менять в базе данных).

Я положил в модель: 

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)

Файл textarea_content.js, который я помещаю в папку /media/js/, также используется для инициализации определенной текстовой области с некоторыми определенными кнопками: 

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

Однако, если вы планируете использовать его для всех текстовых областей, вы можете использовать bkLib.onDomLoaded(nicEditors.allTextAreas); вместо приведенного выше кода.

Наконец, будьте осторожны с разрешениями (когда я впервые попробовал в рабочей среде, мои файлы javascript были недоступны из-за разрешений).

...