功能强大、灵活的 富文本编辑器,可以嵌入到任意的web应用,如下:
前端页面使用富文本
#官网下载tinymce 应用包
<script src="/static/js/tinymce/tinymce.min.js"></script>
<script>
//选择一个容器节点,如<textarea id="content" name='content' cols='30' rows='20' placeholder='输入内容'>
tinymce.init({selector:"#content"})
<script>
django后台使用富文本
安装
sudo pip3 install django-tinymce #默认安装最新版3.3.0
#3.3.0支持django2.2
#查看版本
sudo pip3 freeze |grep -i "django-tinymce"
配置富文本
#settings.py
INSTALLED_APPS = [
...,
"tinymce", #install
]
TINYMCE_DEFAULT_CONFIG = {
'theme': 'mobile/silver',#查看都有哪些主题
#sudo find / -name "tinymce"
#进入静态文件 cd xxx/tinymce/static/tinymce
'width': 600,
'height': 400,
}
"""
TINYMCE_DEFAULT_CONFIG = {
# 使用高级主题,备选项还有简单主题
'theme': 'advanced', #新版本已经不用
# 'theme': 'simple',#新版本已经不用
# 必须指定富文本编辑器(RTF=rich text format)的宽高
'width': 800,
'height': 600,
# 汉化
'language': 'zh',
# 自定义常用的固定样式
'style_formats': [
# title=样式名称
# styles=自定义css样式
# inline:xxx = 将加样式后的文本放在行内元素中显示
# block:xxx = 将加样式后的文本放在块级元素中显示
{'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'}
],
}
"""
#urls.py 主路由
urlpatterns = [
...,
url(r"^tinymce/",include("tinymce.urls")),
]
#models.py 中使用
from tinymce.models import HTMLField
# 在模型类定义中调用
rich_text = HTMLField(verbose_name='富文本')
迁移
python3 manage.py makemigrations
python3 manage.py migrate
注册admin
#admin.py
from django.contrib import admin
from .models import User
admin.site.register(User)
#或者
class UserManager(admin.ModelAdmin):
#显示的字段
list_display = ["username"]
后台添加富文本
添加后查看db,保存的html
后台管理员:
#主后台管理
python3 manage.py createsuperuser
#主管理添加 其他应用的管理
app1>models>----app1_admin
其他类似
django的第三方应用
django查找静态文件
- 查找模板
- 查找静态文件
同模板
tinymce 应用的静态文件就是这么查找的
应用示例
在后台添加数据及富文本
/admin/
代码
提取码:smvd