如何在Django后台添加HTML编辑器

Django后台添加HTML编辑器的方法：

1、下载KindEditor

下载KindEditor, 解压后将那些没用的asp, asp.net, php, jsp, examples文件该删掉后拷贝到static目录下，由于KindEditor是js文件有事编辑器，所以就设置了js/editor目录，并将KindEditor代码拷贝到该目录下。就像这样子static/js/editor/kindeditor-4.1.7。

2、在文本输入域的html中添加运行KindEditor 相对应的JavarScript在官网的使用说明上可以看到。

3、在html页面加入以下脚本：

4、创建kindeditor的，在kindeditor-4.1.7目录下创建出config.js文件。textarea的id登陆admin后，查看元素即可获取。

//config.js

KindEditor.ready(function(K) {

   window.editor = K.create('#id_content',{

       // 指定大小

       width:'800px',

       height:'200px',

   })

})

#admin.py

from django.contrib import admin

from kindeditor.models import Article

# Register your models here.

@admin.register(Article)

class ArticleAdmin(admin.ModelAdmin):

   list_display = ('title',)

   class Media:

       # 在管理后台的HTML文件中加入js文件, 每一个路径都会追加STATIC_URL/

       js = (

           'js/editor/kindeditor-4.1.7/kindeditor-all.js',

           'js/editor/kindeditor-4.1.7/lang.zh_CN.js',

           'js/editor/kindeditor-4.1.7/config.js',

       )

得确是可以，不过过程有点多, 以下代码仅供参考，请自行调整

1. 定义数据来源， 这里简单的定义一下，如 settings.py

LOCATION = {"浙江": ["杭州", "宁波"], "湖北": ["武汉"]}

2. models.py

COUNTRY = [(key, key) for key in sorted(settings.LOCATION.keys())]

class Company(models.Model):

country = models.CharField(max_length=50, null=True, blank=True, verbose_name=_("Country"), choices=COUNTRY)

state = models.CharField(max_length=50, null=True, blank=True, verbose_name=_('State'))

3. admin.py

class CompanyAdminForm(forms.ModelForm):

state = MyChoiceField(label=_('State'), required=False)

def locations(self):

import json

return json.dumps(settings.LOCATION)

def __init__(self, *args, **kwargs):

ins = kwargs.get('instance')

super(CompanyAdminForm, self).__init__(*args, **kwargs)

state = self.fields['state']

if ins and ins.country:

state.choices = [(item, item) for item in settings.LOCATION.get(ins.country)]

class Meta:

model = Company

class CompanyAdmin(admin.ModelAdmin):

form = CompanyAdminForm

4. templates/admin/app/company/change_form.html

复制原change_form.html内容 在合适位置加入（自行写js代码 )

<script type="text/javascript">

var LOCATION = {{ adminform.form.locations | safe }}

var $ = django.jQuery

$(document).ready(function(){

$('#id_country').change(function(){

var country =$(this).val()

$('#id_state').empty()

if (country ){

var state = LOCATION[country]

var i

for (i=0i <state.lengthi++){

var v = state[i]

$('#id_state').append("<option value='" + v + "'>" + v + "</option>")

}

} else {

$('#id_state').append("<option value=''>" + "---------" + "</option>")

}

})

})

</script>

---