如何向Django管理员添加WSYWYG编辑器？

Question

在django博客上向管理面板添加WSYISWG编辑器的最简单方法是什么？

Answer 1

你可以通过django-tinymce使用tinymce：

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

您可以在管理员的每个文本字段或字段上使用tinymce，也可以只添加到特定字段。

对于前者，您可以使用formfield_overides管理模型设置将每个CharField或TextField设置为使用tinymce。 所以在你的admin.py中：

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

对于后者，您可以更改要使用的字段的窗口小部件。 所以在你的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()

Answer 2

你需要做一些简单的事情（例如NicEdit WYSIWYG）：

1）下载所需的编辑器并将其保存在项目的某个文件夹中，让我们说在媒体文件夹中;

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'并从django / contrib / admin / templates / admin / base.py复制文件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>

就这样。 现在，在所有textareas的管理面板中，您将获得所见即所得。

Answer 3

我试图实施Vitali Ponomar给出的解决方案。

我选择NicEdit，因为它只是我放在我的/media/js/文件夹中的两个javascript文件（ nicEdit.js和nicEditorIcons.gif ），并且不需要在模型中更改我的字段类型（我在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)

我放在/media/js/文件夹中的文件textarea_content.js也用于初始化具有某些特定按钮的特定textarea：

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

但是，如果您计划将其用于所有textareas，则可以使用bkLib.onDomLoaded(nicEditors.allTextAreas); 而是上面的代码。

最后，要小心权限（当我第一次在生产环境中尝试时，由于权限，我的javascript文件也不可用）。