由于我在自己的博客上发表文章,需要进入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({