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

news/2024/10/23 5:53:19/

 

目录

安装

在站点中使用

注册富文本应用

添加配置文件

创建模型类

生成迁移文件

执行表迁移

配置站点

富文本不显示解决

修改主题

修改语言设置

自定义视图使用

设置路由

视图

创建模板

总结


安装

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 HTMLFieldclass 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 Textadmin.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>

访问

 

总结

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


http://www.ppmy.cn/news/464765.html

相关文章

第59讲:Python编程案例之舍罕王赏麦

文章目录 1.1.需求描述以及设计思路1.2.代码编写及实现1.3.通过列表生成式来实现1.1.需求描述以及设计思路 需求描述: 印度的舍罕王打算重赏一个宰相,问他有什么要求: 宰相说,请您在在这个棋盘的第一个格子里放1粒麦子,第二个格子里放2粒麦子,第三个格子里放4粒麦子,…

整理优秀的网盘搜索合集

酷搜&#xff1a;https://www.kolsou.com/ 面包树&#xff1a;https://mianbaoshu.cc/ 大力盘&#xff1a;https://www.dalipan.com/#/ 盘搜搜&#xff1a;https://so.pansoso.com/ 虫部落&#xff1a;http://magnet.chongbuluo.com/ 龙喵&#xff1a;https://ailongmiao.…

珍藏多年的技术资源搜索网站——程序员必备

程序员经常需要找一些技术书籍和相关文档&#xff0c;但是通过百度查找往往都是需要各种积分才能够下载&#xff0c;笔者平时的学习中积累几个搜索工具网站&#xff0c;基本上所有需要的技术文档&#xff0c;经典书籍&#xff0c;学习资料&#xff0c;学习视频等等都可以在下列…

常用网盘资源搜索网站

1 度盘搜 https://www.dupanbang.com/ 2 微盘&#xff08;新浪&#xff09; http://vdisk.weibo.com/ 3 百度网盘搜索 http://uzi8.cn/ 4 探索云盘搜索 http://tansuo233.com/ 5 网盘007 https://wangpan007.com/ 6 凌风云搜索 https://www.lingfengyun.com/ 7 去转盘 https://…

2021-01-22 信息搜集更新

信息收集 基本信息 whois 查询 riskIQ 站长之家whois&#xff1a;http://tool.chinaz.com/ipwhois Virus Total: https://www.virustotal.com ,可疑文件分析/子域名/兄弟域名查询备案信息查询 ICP备案查询网 http://www.beianbeian.com/ ICP备案查询 – 站长工具 http://icp.ch…

推荐四个网盘资源搜索工具

类似于搜索引擎的工具&#xff0c;只不过搜索到的是网盘资源的链接。非常值得推荐&#xff01;&#xff01;&#xff01; 文章目录 1. 大圣盘2. 罗马盘3. 凌风云4. 超能搜 1. 大圣盘 https://www.dashengpan.com/#/ 还可以切换不同的模式搜索&#xff0c;还可以按分享时间、…

SRC漏洞挖掘之信息收集

在SRC漏洞挖掘或渗透测试中,信息收集占很大一部分,能收集到别人收集不到的资产,就能挖到别人挖不到的洞。 项目已整理Gitbook文档,方便阅览:Information Collection Handbook 由此项目整理的SRC资产信息收集聚合网站: lovebear.top/info -- SRC信息收集导航 Table of …

信息收集--空间搜索引擎/网盘

目录 傻蛋 语法 搜索案例 shodan语法参考资料 钟馗之眼--知道创宇 语法 钟馗之眼语法参考资料 360 QUAKE--360 语法 fofa--白帽汇 语法 fofa语法参考资料 鹰图--奇安信 语法 搜索案例 相应网站 聚合测绘空间搜索工具 网盘在线搜索工具 傻蛋 网址&#xff1a;…