一.简介
django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便。遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件。常见的富文本编辑器有ckeditor,ueditor,kindeditor,tinmce...
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
二. django-admin中添加富文本编辑器的几种方式
- 使用第三方库,如django-ckeditor
- 在admin中定义富文本编辑器的widget
- 通过定义ModelAdmin的媒体文件
本文采用第三方库的方法。
三.具体步骤
1.下载kindeditor
解压后,将文件夹放在 yourproject/static/js 目录下:D:\blog_project\static\js\kindeditor-4.1.10
kindeditor-4.1.10中提供了许多关于asp,jsp,php的demo,因为使用python,这些文件用不到可以删掉。
2.定义ModelAdmin的媒体文件
admin.py: class ArticleAdmin(admin.ModelAdmin):
list_display = ('title', 'desc', 'date_publish', 'category')
search_fields = ('click_count', 'tag')
class Media:
js = (
'/static/js/kindeditor-4.1.10/kindeditor-min.js',
'/static/js/kindeditor-4.1.10/lang/zh_CN.js',
'/static/js/kindeditor-4.1.10/config.js', # 配置文件,这个需要自己实现
) admin.site.register(content) # 注册models.py中定义的模型
admin.site.register(Article, ArticleAdmin)
目前还没有实现富文本,因为无法获知在何处实现此功能。需配置config.jsconfig.js文件,在需要显示编辑器的位置添加textarea输入框。
3.修改kindeditor的配置文件
在D:\blog_project\static\js\kindeditor-4.1.10下创建config.js文件,写入以下js代码:
KindEditor.ready(function(K) {
K.create('textarea[name=content]',{
width:'800px',
height:'200px',
});
});
注意 textarea[name=content] 没有这一句也无法显示,因为,解析网页源代码:指定文章内容对应的html代码为 id = "id_content",和name = "content"。所以用代码 textarea[name=content]来确定我i们需要利用富文本编辑的区域。
final: