django后台添加添加富文本编辑器simditor

大家好，这里是python技术宅的个人博客。

刚搭建起来的django后台，因为默认的文本输入只能是原始文字，不能很好地进行文本编辑排版，所以急需一个富文本编辑器器，在这里我使用的是simditor。

使用simditor的原因很简单，因为刚好看到了这一个编辑器，而且挺实用，可拓展性强，附上官网地址：simditor官网

下面我就来讲讲如何在django后台集成simditor：

1. 下载simditor
2. 应用simditor
3. 配置simditor

一、下载simditor

从官网上可以直接下载使用，直达连接 https://github.com/mycolorway/simditor/releases，下载好后，解压找到module.js、uploader.js、hotkeys.js、simditor.js和simditor.css等文件，导入到你的django项目文件夹中。

在我的项目中，文件保存在这里：

static/
    bootstrap/
        css/
            simditor.css
        js/
            simditor/
                module.js
                uploader.js
                hotkeys.js
                simditor.js
                textarea.js

其中的 textarea.js是第二步中要引用的文件。

二、引用simditor

以我的项目为例，我需要给article model 的content 字段在后台添加编辑器，article model内容如下：

class Article(models.Model):
    title = models.CharField(max_length=100,verbose_name='标题')
    content = models.TextField(verbose_name='内容')

第一步我们需要做的是将js与css文件导入至admin的模板中，打开article app  中的admin.py文件，创建一个ArticleAdmin类（如果有就忽略），在其内部创建一个Media类，按照格式写好路径，另外，因为simditor是基于jQuery的，所以还要引入jquery.js，必须放在所有其他的simditor文件以前，否则无法工作。最后，不要忘记新建的ArticleAdmin类不要忘记注册。

具体代码如下：

@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
    class Media:
        css = {'all':(
            'bootstrap/css/simditor.css',
            )}
        js = (
            'https://cdn.bootcss.com/jquery/3.2.1/jquery.js',
            'bootstrap/js/simditor/module.js',
            'bootstrap/js/simditor/uploader.js',
            'bootstrap/js/simditor/hotkeys.js',
            'bootstrap/js/simditor/simditor.js',
            'bootstrap/js/simditor/rich_text.js',
            'bootstrap/js/simditor/textarea.js',
        )

三、配置编辑器

如果上述操作没有问题的话，重启本地服务器（我是在本地做的此次操作），打开django后天，选择新建文章，在此页面查看源代码会发现多了一行。

具体如下：

<textarea name="content" id="id_content" required class="vLargeTextField" cols="40" rows="10">
</textarea>

创建一个 textarea.js 用于初始化编辑器，这个文件名是我自己命名的，读者可自行定义，但要与第一步、第二部中的名称相对应。

写入如下代码：

$(function() {
    var editor = new Simditor({
        textarea: $("#id_content"),
        //optional options    });
});

注意，textarea:$("#id_content")就是上述<textarea>中的id="id_content"。

完成这些后，你就可以在后台中看到一个初始的富文本编辑器。

具体的个性化设计，如果各位读者还感兴趣的话没欢迎留言。