在 Django 后台 admin 中集成一个富文本编辑器tinymce

目录

实现效果：

项目目录：

 实现步骤：

1、在虚拟环境使用豆瓣源安装

2、去GitHub下载django-tinymce，将tinymce文件夹放到your_project目录下

 3、将tinymce/static/tiny_mce文件夹放到your_project/static目录下

4、在urls.py文件中加入：url(r'^tinymce/',include('tinymce.urls'))，

5、在settings.py文件INSTALLED_APPS中加入tinymce

6、setting文件上配置tinymce（基本功能与静态文件的搜索路径）

7、修改models.py中相应的字段

8、把tinymce整合到后台

---

在Django admin后台文本编辑器是很简陋的，所以我想在后台实现一个富文本编辑器功能。

实现效果：

项目目录：

 

 实现步骤：

1、在虚拟环境使用豆瓣源安装

pip install django-tinymce -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

注意：要耐心等，我一开始就是提前取消换豆瓣源，但是豆瓣源一安装就提示我已经安装，后来才知道是没安装完整，导致not found。

2、去GitHub下载django-tinymce，将tinymce文件夹放到your_project目录下

 3、将tinymce/static/tiny_mce文件夹放到your_project/static目录下

4、在urls.py文件中加入：url(r'^tinymce/',include('tinymce.urls'))，

5、在settings.py文件INSTALLED_APPS中加入tinymce

6、setting文件上配置tinymce（基本功能与静态文件的搜索路径）

TINYMCE_DEFAULT_CONFIG = {
    # // General options
    'mode': 'textareas',
    'theme': "advanced",
    'plugins': "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

    # // Theme  options
    'theme_advanced_buttons1': "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",
    'theme_advanced_buttons2': "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    'theme_advanced_buttons3': "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
    'theme_advanced_toolbar_location': "top",
    'theme_advanced_toolbar_align': "left",
    'theme_advanced_statusbar_location': "bottom",
    'theme_advanced_resizing': 'true',

    # // content_css: "/css/style.css",
    'template_external_list_url': "lists/template_list.js",
    'external_link_list_url': "lists/link_list.js",
    'external_image_list_url': "lists/image_list.js",
    'media_external_list_url': "lists/media_list.js",

# // Style formats
    'style_formats': [
    {'title': 'Bold text', 'inline': 'strong'},
    {'title': 'Red text', 'inline': 'span', 'styles': {'color': '#ff0000'}},
    {'title': 'Help', 'inline': 'strong', 'classes': 'help'},
    {'title': 'Table styles'},
    {'title': 'Table row 1', 'selector': 'tr', 'classes': 'tablerow'}
    ],
    'width': '700',
    'height': '400'
}

7、修改models.py中相应的字段

from django.db import models
from tinymce.models import HTMLField

class MyModel(models.Model):
    ...
    content = HTMLField()

8、把tinymce整合到后台

from django.contrib import admin


class PostAdmin(admin.ModelAdmin):
    list_display = ['title', 'zhaiyao','created_time', 'modified_time', 'category', 'author']

    class Media:
        js = [
            '/static/tinymce/js/jquery.min.js',   # 必须首先加载的jquery，手动添加文件
            '/static/tinymce/js/tinymce/tinymce.min.js',   # tinymce自带文件
            '/static/tinymce/js/tinymce/plugins/jquery.form.js',    # 手动添加文件
            '/static/tinymce/js/tinymce/textarea.js',   # 手动添加文件，用户初始化参数
        ]

 

这样就可以实现admin的富文本编辑器了。如果还有什么问题，可能是我遗漏了，请直接留言。谢谢。