Django轻松使用富文本编辑器-KindEditor

Django轻松使用富文本编辑器-KindEditor

        由于需要在django admin中使用到富文本编辑器，由于我比较喜欢KindEditor，于是写了个自定义widget



        1、首先从KindEditor主页下载，并解压至你的static文件存放目录(略...)

        

        2、编写自定义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)

复制代码

3、在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. 
    

复制代码

4、需要在模板中使用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%}

复制代码

4、需要注意的地方：

                a) 所下载的kindeditor文件包存放的位置及settings里的MEDIA_URL地址（其实就是保证最终生成的JS和CSS访问路径是正确的）

                b) 若非django admin的模板，请自行加载jQuery