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. 
    

复制代码

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

icyomik

这次，原创？

中关村村草

这次，原创？
icyomik 发表于 2010-12-23 18:07

    不告诉你！