Django中admin后台添加富文本编辑器

在开发一个Django项目的时候，比如博客，后台通常需要编写一个文章上传，但是在普通的后台写的文章上传后在前端显示的时候往往没有格式，所以这时我们可以通过添加富文本编辑器来解决这个问题。

我这里介绍的是使用python3.5+Django2.0.3+KindEditor 4.1.7

KindEditor是什么？

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

好，首先下载KindEditor（官网下载）

下载后可以删除这些没用的文件asp,asp.net,jsp,php.在django中这些都没用。

然后把文件夹引入到django根目录下的/static/js/ ， 文件夹下

要想在admin后台中使用，需要在KindEditor文件夹中添加一个config.js文件。js文件中代码如下

KindEditor.ready(function (k) {
    window.editor = k.create('#id_background',{  #这个id选择器是你要添加富文本编辑器的元素的id，按F12查找
        resizeType:1,
        allowPreviewEmoticons : false,
        allowImageRemote : false,
        uploadJson : '/upload/kindeditor',  #这是上传图片处理的url
        width:'800px',
        height:'400px',

    });
})

接下来就是去admin.py中注册模型类，之前是admin.register.site(模型名)，现在把这个注释掉

@admin.register(Poem)
class PoemAdmin(admin.ModelAdmin):
    class Media:
        js = (
            '/static/kindeditor/kindeditor-all.js',#这是在后台的页面中追加js文件
            '/static/kindeditor/lang/zh-CN.js',
            '/static/kindeditor/config.js',
        )

到这里，重启服务，到admin后台，你会发现原来文本框的上面增加了很多元素。