Tôi làm cách nào để thêm trình soạn thảo WSYWYG vào quản trị viên Django?

Question

Cách đơn giản nhất để thêm trình soạn thảo WSYISWG vào bảng quản trị trên blog django là gì?

Answer 1

Bạn có thể sử dụng TinyMCE qua django-TinyMCE:

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

Bạn có thể sử dụng TinyMCE trên tất cả các textfield đơn hoặc charfield trong admin, hoặc có thể chỉ cần thêm vào các lĩnh vực cụ thể.

Đối với trường hợp trước, bạn đặt mọi CharField hoặc TextField để sử dụng tinymce bằng cách sử dụng cài đặt mô hình quản trị formfield_overides. Vì vậy, trong admin.py của bạn:

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

Để sau này bạn thay đổi tiện ích cho trường bạn muốn sử dụng tinymce. Vì vậy, trong forms.py của bạn:

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

và sau đó nói với các admin để sử dụng hình thức này (trong admin.py):

from models import Blog 
from forms import BlogForm 

class BlogAdmin(ModelAdmin): 
    form = BlogForm() 

Answer 2

Bạn cần phải làm vài điều đơn giản (NicEdit WYSIWYG làm ví dụ) :

1) tải xuống trình chỉnh sửa cần thiết và lưu nó vào một số thư mục trong dự án của bạn, cho phép nói trong thư mục phương tiện;

2) trong urls.py thêm dòng tiếp theo:

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) tạo thư mục 'admin' trong thư mục mẫu và sao chép tập tin có base.py từ django/contrib/admin/templates/admin/cơ sở .py;

4) mở tập tin base.py và chỉnh sửa nó theo cách đó - 9 hàng đầu tiên không chạm gì cả, nhưng sau khi liên tiếp 9 thêm mã tiếp theo:

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

Đó là tất cả. Bây giờ trong bảng quản trị trong tất cả các textareas sẽ có sẵn WYSIWYG của bạn.

Answer 3

Tôi đã cố gắng triển khai giải pháp do Vitali Ponomar đưa ra.

tôi chọn NicEdit bởi vì nó chỉ là hai tập tin javascript (nicEdit.js và nicEditorIcons.gif) mà tôi đặt trong thư mục /media/js/ của tôi và không đòi hỏi phải thay đổi kiểu trường của tôi trong mô hình (tôi thấy trong TinyMCE Documentation mà đòi hỏi phải thay đổi lĩnh vực này sang loại HTMLField và tôi không muốn thay đổi bất kỳ thứ gì trong cơ sở dữ liệu).

tôi đặt trong mô hình:

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) 

File textarea_content.js mà tôi đặt trong /media/js/ thư mục cũng được sử dụng để khởi tạo một textarea cụ thể với một số nút cụ thể là:

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

Tuy nhiên nếu bạn đang có kế hoạch sử dụng nó cho tất cả các textareas bạn có thể sử dụng bkLib.onDomLoaded(nicEditors.allTextAreas); thay vì mã trên.

Cuối cùng, hãy cẩn thận với các quyền (khi tôi thử lần đầu tiên trong môi trường sản xuất, các tệp javascript của tôi cũng không có sẵn do quyền).