Django Admin：添加富文本编辑器kindeditor

软件环境：Python 3.4.3+Django 1.8.5+KindEditor 4.1.10

1. kindeditor简介：

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

2.在Django Admin当中加入KindEditor

加入之后的效果如下，这比一般的的textarea好多了。

2.1. 设置static文件路径

KindEditor是用JavaScript编写的，这属于static files，因此需要为Django设置static路径。 首先在工程目录下新建static文件夹，这里要注意的是千万不要在my_app/下创建static文件夹作为static文件存放的目录, 这会导致Django无法搜索到自己的static 文件。创建后好，在settings中配置static文件目录。添加以下代码

# 指定在模板中添加static文件的猴子

STATIC_URL = '/static/'

# 指定静态文件夹所在的路径

STATICFILES_DIRS = (

os.path. join (BASE_DIR, 'static' ),

)

2.2. 下载KindEditor

下载KindEditor, 解压后将那些没用的asp, asp.net, php, jsp, examples文件该删掉后拷贝到static目录下的JS文件夹下（将KindEditor代码拷贝到该目录下）。就像这样子static/js/kindeditor-4.1.10。

2.3. 在文本输入域的html中添加运行KindEditor 相对应的JavarScript

在admin.py中的的管理类中添加class Media，引入js文件。创建kindeditor的，在kindeditor-4.1.10目录下创建出config.js文件。textarea的id登陆admin后，查看元素即可获取。

#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 = (

'/static/js/kindeditor-4.1.10/kindeditor-all.js' ,

'/static/js/kindeditor-4.1.10/lang/zh_CN.js' ,

'/static/js/kindeditor-4.1.10/config.js' ,

)

//config.js

KindEditor.ready( function(K) {

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

// 指定大小

width: '800px' ,

height: '200px' ,

});

});