Django配置富文本编辑器kindeditor

一.简介      

      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: