刨析django----富文本

功能强大、灵活的 富文本编辑器，可以嵌入到任意的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后台使用富文本

django-tinymce 富文本
版本链接
学习链接

安装

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查找静态文件

1. 查找模板
   
2. 查找静态文件
   同模板
   
   tinymce 应用的静态文件就是这么查找的

应用示例

在后台添加数据及富文本
/admin/
代码
提取码：smvd

 
 
 
 
上一篇：刨析django----配置全文索引    下一篇：alipay问题点