Django admin中使用富文本编辑器tinyMCE

前言

因为最紧要搭建一个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'
});

页面最终效果