软件环境:Python 3.4.3+Django 1.8.4+KindEditor 4.1.7
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目录下,由于KindEditor是js文件有事编辑器,所以就设置了js/editor目录,并将KindEditor代码拷贝到该目录下。就像这样子static/js/editor/kindeditor-4.1.7。
2.3. 在文本输入域的html中添加运行KindEditor 相对应的JavarScript
在官网的使用说明上可以看到
现在的问题是怎么在admin后台管理当中的html页面加入JavaScript代码,答案就是在admin.py中的的管理类中添加class Media,引入js文件。创建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',
)