Django輕鬆使用富文本編輯器-KindEditor

Django輕鬆使用富文本編輯器-KindEditor

        因爲須要在django admin中使用到富文本編輯器，因爲我比較喜歡KindEditor，因而寫了個自定義widget



        一、首先從KindEditor主頁下載，並解壓至你的static文件存放目錄(略...)

        

        二、編寫自定義widget：

1. from django import forms
   

2. 
   

3. from django.conf import settings 
   

4. 
   

5. class KindEditor(forms.Textarea):
   

6. 
   

7.         class Media:
   

8. 
   

9.                 js = (settings.MEDIA_URL + 'js/widgets/kindeditor.js',)
   

10. 
    

11.                 css = (settings.MEDIA_URL + 'js/widgets/kindeditor.css',)
    

12. 
    

13.         def __init__(self, attrs = {}):
    

14. 
    

15.                 attrs['rel'] = 'kind'
    

16. 
    

17.                 super(KindEditor, self).__init__(attrs)

複製代碼

三、在form中使用上面的widget：

1. from customwidget.editor import KindEditor
   

2. from django import forms
   

3. from app.models import MyModel
   

4. from django.contrib import admin
   

5. 
   

6. class MyModelAdminForm(forms.ModelForm):
   

7.         pass
   

8.         
   

9.         class Meta:
   

10.               model = MyModel
    

11.               widgets = {
    

12.                 'fieldname':KindEditor()
    

13. 
    

14.               }
    

15. 
    

16. class MyModelAdmin(admin.ModelAdmin):
    

17. 
    

18. 
    

19.          form = MyModelAdminForm
    

20. 
    

21. admin.site.register(MyModel, MyModelAdmin) 
    

22. 
    

23. 
    

複製代碼

四、須要在模板中使用JS來初始化KindEditor(請確保你的模板中已加載jQuery, django admin中已自帶，不過namespace換到了django之下)：

1. {%extends "admin/change_form.html"%}
   

2. {%block extrahead%}
   

3.     {{block.super}}
   

4.      <script type="text/javascript">
   

5.            django.jQuery(document).ready(function(){
   

6.                 django.jQuery("textarea[rel='kind']").each(function(n){
   

7.                           KE.show({
   

8.                                id : django.jQuery(this).attr("id"),
   

9.                           });
   

10.                 });
    

11.            });
    

12.       </script>
    

13. {%endblock%}

複製代碼

四、須要注意的地方：

                a) 所下載的kindeditor文件包存放的位置及settings裏的MEDIA_URL地址（其實就是保證最終生成的JS和CSS訪問路徑是正確的）

                b) 若非django admin的模板，請自行加載jQuery