跳转至

Django Admin中集成TinyMCE

使用的版本：Django 1.10.2 TinyMCE 4.4.3

步骤1

前往TinyMCE官网下载TinyMCE_4.4.3，更早之前的版本可以点击此处下载。

步骤2

打开tinymce_4.4.3/tinymce/js文件夹，拷贝其中的tinymce文件夹至Django项目的STATIC_ROOT对应路径的js文件夹下，目录结构为STATIC_ROOT/js/tinymce。

步骤3

在STATIC_ROOT/js/文件夹下新建textareas.js文件，内容如下：

tinymce.init({
    selector: 'textarea',
    height: 300,
    theme: 'modern',
    menubar: false,
    plugins: [
        'advlist autolink autosave sh4tinymce  link image lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table contextmenu directionality emoticons template paste textcolor','codesample autoresize table'
    ],
    toolbar1: "undo redo | bold italic codesample sh4tinymce underline | alignleft aligncenter alignright alignjustify " +
        "| table link image media | print preview | forecolor backcolor emoticons | bullist numlist outdent indent " +
        "| styleselect formatselect fontselect fontsizeselect",
    language: 'zh_CN',
    content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '//www.tinymce.com/css/codepen.min.css'
    ]
 });
  • 其中selector对应的是富文本编辑器在页面中对应的作用域
  • height和weight分别对应的富文本编辑器编辑框的高和宽此处宽度未设置则和界面同宽
  • theme为编辑器主题，可在tinymce/themes文件夹下看到有三个子文件夹，分别是advanced、inlite、modern，对应的文件名即可作为theme的声明选项。
  • menubar设置为true时显示最上方默认菜单栏，为false则不显示。
  • plugins为该此富文本编辑器使用到的插件，可以自己定义适合自己需求的，对应的plugins位于tinymce/plugins文件夹下，用户可以自己需要的功能自定义plugins并加入到声明列表中即可生效；所有预设的plugin均使用压缩过的.min.js文件类型，可使用在线代码格式化 工具查看。其中image、media不支持在线上传功能，只可以插入图片地址来实现插入图片、视频功能，第三方图片上传可以考虑七牛云和uploadcare，七牛云并没有找到可以使用现成的plugin但是其提供的免费存储空间大，uploadcare可以至此处下载plugins(亲测可用)但免费存储容量只有500M；simplecode为插入代码区块的plugin；autosize支持动态的根据当前编辑的文本内容多少调整编辑框的大小;autosave可以直接在编辑框中按下ctrl+s来进行保存。
  • toolbar为工具条生命，可以声明多个工具条，只有在工具条中的plugins才能看到快捷方式图片，需要注意 | 符号的两边需要留出空格。
  • language为富文本编辑器的提示使用语言，可至此处下载对应的js文件后拷贝至tinymce/langs/文件夹下并声明即可。

步骤4

在app目录下的admin.py文件中插入如下代码即可实现model中TextField 对应的字段使用富文本编辑器来进行编辑的目的。

class ArticleAdmin(admin.ModelAdmin):
    .
    .
    .
    class Media:
        js = (
            '/STATIC_ROOT/js/tinymce/tinymce.min.js',
            '/STATIC_ROOT/js/textareas.js',
        )

步骤5

预览图：

img