html编辑器知乎,Django后台集成富文本编辑器simditor

由于我在自己的博客上发表文章，需要进入django admin后台进行编辑，但是默认的textarea只能输入原始文字，这显然满足不了我的要求，所以想着用富文本的方式来实现文章排版。

网上有不少开源的富文本编辑器，比如simditor、ueditor、kindedtor、tinymce、CKEditor等，我试用了其中三个编辑器，simditor、ueditor、kindedtor。其中ueditor不仅体量大，写出的HTML代码杂乱冗余，而且在代码区内复制代码时会丢失缩进，很烦人，更重要的是丑。kindeditor没怎么用就扔了，还是因为丑。

最后选择了simditor。之所以选择它主要是有以下几个原因：

轻量简洁，整个包不到500k的大小，但是该有的基础功能都有

有不少优秀的拓展功能，比如markdown拓展

好看，用着舒服

我的项目中是手动导入了simditor，并为其写了相应的代码。如果你不想太麻烦，也可以用

django-simditor

，但是看了源码以后发现，它上传文件的view没有csrf保护，这样无疑降低了网站的安全性，不建议直接使用。

接下来进入正题，介绍如何在django后台集成simditor。

一、下载simditor

从GitHub上

下载simditor

的压缩文件，解压后找到module.js、uploader.js、hotkeys.js、simditor.js和simditor.css等文件，导入至django项目的静态文件夹内。在我的项目中这些文件保存在blog app的文件夹内，结构如下：

static/

blog/

simditor.css

simditor/

module.js

uploader.js

hotkeys.js

simditor.js

rich_text.js

其中rich_text.js是自己写的配置文件，先不管，后面再详细说明。

二、在django后台中引用simditor

用我的项目举例，我需要给Article model的content TextField在admin后台添加一个富文本编辑器，用以编辑文章的主要内容，Article model位于blog app内，示意如下：

blog/models.py

from django.db import models

class Article(models.Model):

title = models.CharField('标题', max_length=100)

content = models.TextField('内容')

……

首先需要将js与css文件导入至admin的模板中，打开blog app内的admin.py，创建一个ArticleAdmin类，在其内部创建一个

Media类

，按格式写入你存放css和js文件的相对路径，这些路径都会加上

STATIC_URL

前缀，其中simditor.js必须在最后。

另外，simditor是基于jQuery的，所以还要引入jquery.js，必须放在所有其他的simditor文件以前，否则无法工作。这里为了方便用的CDN，要在admin的模板中使用CDN只需写入完整的http url就可以了，此时不会加上STATIC_URL前缀。

最后，不要忘记注册ArticleAdmin类：

admin.site.register()

。完成后，如果运行项目并在浏览器打开admin网址，进入编辑Article页面，则应该能在HTML head部分找到相应的css、js文件引用，如不能。请检查Media类的格式是否正确。

blog/admin.py

from django.contrib import admin

from .models import Article

class ArticleAdmin(admin.ModelAdmin):

class Media:

css = {'all':(

'blog/css/simditor.css',

js = (

'https://cdn.bootcss.com/jquery/3.2.1/jquery.js',

'blog/js/simditor/module.js',

'blog/js/simditor/uploader.js',

'blog/js/simditor/hotkeys.js',

'blog/js/simditor/simditor.js',

'blog/js/rich_text.js',

admin.site.register(Article, admin_class=ArticleAdmin)

三、配置编辑器

成功引入了simditor文件后，先在admin网页内找出要添加富文本编辑器的textarea，由于title字段不需要富文本，所以只需要给content字段加上编辑器。默认情况下，django会自动给TextField生成相应的textarea，chrome F12后可以发现，其代码如下：

然后创建一个js文件用于初始化编辑器，我把该文件命名为textarea.js，写入如下代码。其中textarea为必填项，用jQuery选择器选取要添加富文本的textarea即可，在这里用的是

$("#id_content")

。placeholder是内容空白时的提示字符串，可以不填。除此以外，还可以提供

其他的选项

。

blog/js/textarea.js

$(function() {

var editor = new Simditor({