前言
因为最紧要搭建一个Blog,所以要选择一个合适的富文本编辑器。找网上找了很久选择了一款国外的富文本编辑器tinyMCE。这个编辑页面很符合我的审美,界面如下。
这个界面可以说非常美观,而且含有许多插件。有部分插件是需要付费使用的,但是免费的插件已经足够普通用户使用了。如果真想用付费插件,但是不想处那么的多钱去购买,我们可以选择白嫖。每个邮箱储存注册可以有30天的免费试用时间,可以利用zoho的企业邮箱来白嫖。
步骤
下载tinyMCE
这里给出下载网址get-tiny,可以选择使用它的CDN,但是感觉太慢,建议下载使用,这里我下载的Dev Packeage版本的。
添加至Django项目
将下载的tinyMCE拖至你的Django目录下,并将tinyMCE注册至admin。
这里我为blog app下的Article的content字段注册成tinyMCE编辑
打开blog app下的admin.py文件,将tinyMCE的JS导入admin中。因为tinyMCE需要jQuery的支持所以要先导入jQuery,再导入tinyMCE的js文件(补充一点这个JS文件的位置是tinymce/js/tinymce/tinymce.min.js)。
class ArticleAdmin(admin.ModelAdmin):
# readonly_fields = ('publish_time', )
list_display = ("id", "title")
class Media:
js = (
"/static/blog/plugins/jquery.min.js", # 导入jQuery
"/static/blog/plugins/tinymce/js/tinymce/tinymce.min.js", # 导入tinyMCE
"/static/blog/js/tinymce.config.js" # 导入tinyMCE的配置文件
)
然后自己再创建一个配置文件,这里我创建的tinymce.config.js文件。
首先要对tinyMCE初始化,这里给出一个基本的初始化代码。selector用于选择要改变为tinyMCE的DOM,在Django中可以打开开发人员工具(F12),找到要初始化的DOM就OK了。
tinymce.init({
selector: $("textarea[id='id_content']"),
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});