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

转载于:https://www.cnblogs.com/ken-zhang/archive/2010/12/16/django_widget_kindeditor.html