Question

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

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）在templates文件夹中创建文件夹'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的管理面板中，您将可以使用WYSIWYG。

Answer 3

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

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

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

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

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

3 个答案: