目前主流有两个插件，一个是KindEditor(遵循LGPL v2)，另一个是百度的uEditor(遵循MIT协议)

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

Django中使用KindEditor

先下载KindEditor，解压后可以将没用用的asp, asp.net, jsp, php等用不到的文件夹删除，之后将剩余的所有文件复制到Django项目的static目录下。

在需要富文本编辑页面中添加相应的JavaScript代码即可，详细过程参看官网介绍

admin后台管理中引入KindEditor

在admin后台管理中的html页面中引入KindEditor，需要在admin.py中的管理类中添加class Media

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#admin.py
from django.contrib import admin
from .models import Article

@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):

    list_display = ('title', )

    class Media:
        js = (
            '/static/js/kindeditor/kindeditor-all-min.js',
            '/static/js/kindeditor/lang/zh_CN.js',
            '/static/js/kindeditor/config.js',
        )

注意，上述代码中用到了config.js文件需要自己创建

1
2
3
4
5
6
7
8
9
//config.js
KindEditor.ready(function(K) {
    window.editor = K.create('#id_content',{

        // 指定大小
        width:'800px',
        height:'200px',
    });
});

显示富文本文件内容

想要达到富文本的效果，只需要将存储的富文本内容用autoescape off包括起来就可以了。

1
2
3
{% autoescape off %}
    {{post.content}}
{% endautoescape %}