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

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

 

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

 

2、编写自定义widget： 

 

from django import forms

from django.conf import settings 

class KindEditor(forms.Textarea):

class Media:

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

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

def __init__(self, attrs = {}):

attrs['rel'] = 'kind'

super(KindEditor, self).__init__(attrs) 

 

 

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

from customwidget.editor import KindEditor

from django import forms

from app.models import MyModel

from django.contrib import admin


class MyModelAdminForm(forms.ModelForm):

        pass

        

        class Meta:

              model = MyModel

	      widgets = {

  'fieldname':KindEditor()

              }

class MyModelAdmin(admin.ModelAdmin):

         form = MyModelAdminForm

admin.site.register(MyModel, MyModelAdmin) 

 

 

4、需要在模板中使用JS来初始化KindEditor(请确保你的模板中已加载jQuery, django admin中已自带，不过namespace换到了django之下)：

{%extends "admin/change_form.html"%}
{%block extrahead%}

    {{block.super}}

     <script type="text/javascript">

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

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

                          KE.show({

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

                          });

                });

           });

      </script>

{%endblock%}

  4、需要注意的地方：

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

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