Django高级扩展之tinymce富文本实现

该文详细介绍了如何在Django项目中集成和配置TinyMCE富文本编辑器,包括安装应用、注册、创建模型、生成和执行迁移、配置站点、解决富文本不显示问题、修改主题和语言设置,以及自定义视图和路由的使用。

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

 

目录

安装

在站点中使用

注册富文本应用

添加配置文件

创建模型类

生成迁移文件

执行表迁移

配置站点

富文本不显示解决

修改主题

修改语言设置

自定义视图使用

设置路由

视图

创建模板

总结


安装

pip install django-tinymce

 

安装过程如下:

 

在站点中使用

注册富文本应用

配置settings.py文件

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

添加配置文件

在settings.py底部添加,配置模式和宽高。

# 富文本配置
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400
}

创建模型类

项目models.py中增加方法

from tinymce.models import HTMLField

class Text(models.Model):

    
    str = HTMLField()

生成迁移文件

命令如下:

python manage.py makemigrations myapp

执行结果如下:

D:\lianxi_py\project>python manage.py makemigrations myapp
Migrations for 'myapp':
  myapp\migrations\0006_auto_20230616_1131.py
    - Create model Text
    - Change Meta options on students
    - Change managers on students
    - Alter field desc on students

执行表迁移

将模型的最新状态部署到数据库。

命令如下:

python manage.py migrate myapp

执行结果如下:

D:\lianxi_py\project>python manage.py migrate myapp
Operations to perform:
  Apply all migrations: myapp
Running migrations:
  Applying myapp.0006_auto_20230616_1131... OK

配置站点

Admin.py 模型类站点注册

from django.contrib import admin
from .models import Text


admin.site.register(Text)

然后站点登录,站点管理增加Texts。

 

点击详情,增加text

 

 

富文本不显示解决

这时候,没出现富文本

 

查看控制台提示js 404

 

 看网上几个解决方法一一尝试,发现注释设置的主题后,能加载出来。

看到网友说django-tinymce-2.8.0这个版本才有advanced主题。

我的Django版本是3.0 只能改主题了。

修改主题

找到django-tinymce库(一般在python3.7\Lib\site-packages中)

打开tinymce查看主题

就剩下moblie和silver两种。所以之前设置的模板无法找到。

模板改为silver

'theme': 'silver',

 

修改语言设置

默认显示为繁体字,改为简体中文。

'language': 'zh_CN'

效果

 

 

自定义视图使用

设置路由

urlpatterns = [
    # 自定义富文本实现
    path(r'custom_edit', views.custom_edit, name='custom_edit')
]

视图

def custom_edit(request):
    """ 自定义页面使用富文本 """

    return render(request, 'myapp/custom_edit.html')

创建模板

加载tinymce.min.js脚本,设置配置后,再加载相应语言脚本。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义页面使用富文本</title>
    <script src="{% static 'tinymce/tinymce.min.js' %}"></script>
    <script>
        tinyMCE.init({
            'mode':'textareas',
            'theme': 'silver',
            'width': 600,
            'height': 400,
            'language': 'zh_CN'

        })
    </script>
</head>
<body>
    <textarea name="str" id="str" cols="30" rows="10">这是默认内容</textarea>
</body>
</html>

访问

 

总结

富文本主要用于在项目中实现图文混合编辑,但又想实现非固定模板时,使用,后台编辑发布,利用的就是富文本的所见即所得效果!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JSON_L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值