django使用tinymec

最新推荐文章于 2025-06-30 09:29:32 发布

指掌天涯

最新推荐文章于 2025-06-30 09:29:32 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： Python

本文链接：https://blog.youkuaiyun.com/weixin_42470545/article/details/80718514

Django 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Django项目中集成tinymce富文本编辑器，包括在后台管理页面和普通页面上的应用。详细步骤涵盖了环境搭建、模型定义、配置设置及视图函数编写等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在后台管理页面使用tinymce

先在虚拟环境下安装tinymce;

pip install django-tinymce;

models.py中的设置：在models.py文件下设立字段，并完成数据迁移（注意写在tinymce里的字段类型应该设为HTMLField类）

from django.db import models

# Create your models here.
from tinymce.models import HTMLField

class blog(models.Model):
    title = models.CharField(max_length=20,default='title')
    content = HTMLField()

setting.py中的设置：首先在INSTALLED_APPS中注册tinymce，

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'apps',#我自己创建的一个app
    'tinymce',#注册tinymce模块
]

然后在setting.py中对tinymce进行配置

TINYMCE_DEFAULT_CONFIG = {
    'theme':'advanced',

    'width':800,
    'height':600,
    'language':'zh',
    'style_formats':[  #以下这几个配置的是富文本中的样式
        {'title': 'Bold text', 'inline': 'b'},
        {'title': 'Red text', 'inline': 'span', 'styles': {'color': '#ff0000'}},
        {'title': 'Red header', 'block': 'h1', 'styles': {'color': '#ff0000'}},
        {'title': 'Example 1', 'inline': 'span', 'classes': 'example1'},
        {'title': 'Example 2', 'inline': 'span', 'classes': 'example2'},
        {'title': 'Table styles'},
        {'title': 'Table row 1', 'selector': 'tr', 'classes': 'tablerow1'}
    ]
}

admin.py中的设置：进行模型注册

from django.contrib import admin

# Register your models here.
from apps.models import blog

class blogAdmin(admin.ModelAdmin):
    list_display = [
        'title',
        'content',
    ]

admin.site.register(blog,blogAdmin)

2.在普通页面中使用

首先创立模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写博客</title>
        
    {#  RTF编辑器会动态地给文本添加css样式,这个工作势必借助于JS实现  #}
    {# 导入框架写好的js，这个static文件夹不是指工程下面的，而是安装tinymce的时候自动加进框架的static文件夹下 #}
    <script src='/static/tiny_mce/tiny_mce.js'></script>  

    {# 自定义脚本对当前页的RTF编辑器做配置 #}
    {# 配置的解释请参加settings.py #}
    <script>
        tinyMCE.init({
            'mode': 'textareas',
            'theme': 'simple',
            'theme': 'advanced',
            'width': 800,
            'height': 600,
            'language': 'zh',
            'style_formats': [
                {'title': 'Bold text', 'inline': 'b'},
                {'title': 'Red text', 'inline': 'span', 'styles': {'color': '#ff0000'}},
                {'title': 'Red header', 'block': 'h1', 'styles': {'color': '#ff0000'}},
                {'title': 'Example 1', 'inline': 'span', 'classes': 'example1'},
                {'title': 'Example 2', 'inline': 'span', 'classes': 'example2'},
                {'title': 'Table styles'},
                {'title': 'Table row 1', 'selector': 'tr', 'classes': 'tablerow1'}
            ],
        })
    </script>
</head>
<body>

<form method="post" action="{% url 'addblog' %}">
    {% csrf_token %}
    <input type="text" placeholder="请输入标题..." name="title"><br>

    {# 普通页面中的富文本编辑器对应着textarea表单控件 #}
    <textarea name="content"></textarea>

    {# 被提交的文本内容会以html代码的形式存储与服务端的数据库中 #}
    <input type="submit" value="发表" style="width: 176px;">
</form>
</body>
</html>

然后在views.py下面设立对应的函数并在url,py文件下编写路由函数：

def addblog(request):
    if request.method == 'GET':
        return render(request,'read.html')
    else:
        title = request.POST.get('title',None)
        content = request.POST.get('content',None)
        if title and content:
            blogs = blog()
            blogs.title = title
            blogs.content = content
            blogs.save()
            return HttpResponse('发表成功')
        return HttpResponse('发表失败')