借助富文本编辑器，网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例，其它富文本编辑器的使用也是类似的。
在虚拟环境中安装包。
pip3 install django-tinymce安装完成后，可以使用在Admin管理中，也可以自定义表单使用。
1）在项目/settings.py中为INSTALLED_APPS添加编辑器应用。
INSTALLED_APPS = ( 'tinymce', # 富文本编辑器 .... )2）在项目/settings.py中添加编辑器配置。
# 富文本编辑器配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400, }3）在项目/urls.py中配置编辑器url。
from django.contrib import admin from django.urls import include, path urlpatterns = [ path('tinymce/', include('tinymce.urls')), # 导入tinymce应用的urls.py .... ]到这里已经配置好了tinymce库的注册使用了，下面在Admin后台使用。
1）在assetinfo/models.py中，定义模型的属性为HTMLField()类型。
from django.db import models from tinymce.models import HTMLField class GoodsInfo(models.Model): goods_name = models.CharField(verbose_name="商品名称",max_length=50, default=None, db_column='goods_name') # 商品名称 gcontent=HTMLField(verbose_name="商品详情") # 设置富文本字段 class Meta: verbose_name = '商品信息' verbose_name_plural = verbose_name2）执行迁移数据。
python3 manage.py makemigrations python3 manage.py migrate3） 在mysql中查看生成的表结构
mysql> desc assetinfo_goodsinfo; +------------+-------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +------------+-------------+------+-----+---------+----------------+ | id | int(11) | NO | PRI | NULL | auto_increment | | gcontent | longtext | NO | | NULL | | | goods_name | varchar(50) | NO | | NULL | | +------------+-------------+------+-----+---------+----------------+ 3 rows in set (0.00 sec) mysql>可以看到生成的字段类型就是长文本类型。
4）在assetinfo/admin.py中注册模型类GoodsInfo
from django.contrib import admin from .models import * @admin.register(GoodsInfo) class GoodsInfoAdmin(admin.ModelAdmin): list_display = ['id','gcontent','goods_name']5）运行服务器，进入admin后台管理，点击GoodsInfo的添加，效果如下图
访问：http://127.0.0.1:8000/admin/
保存之后，如下：
6）返回mysql查看一下保存的数据
mysql> select * from assetinfo_goodsinfo; +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ | id | gcontent | goods_name | +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ | 1 | <h1><strong>商品详情：</strong></h1> <ol> <li><strong><strong><strong>详情内容1</strong></strong></strong><hr /></li> <li><em>详情内容2</em><hr /></li> </ol> | 商品1 | +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ 1 row in set (0.00 sec) mysql>1）在assetinfo/views.py中定义类视图Editor，用于显示编辑器。
from django.views.generic import View class Editor(View): def get(self, request): return render(request, 'assetinfo/editor.html')2）在assetinfo/urls.py中配置url。
from .views import * urlpatterns = [ # ex:/assetinfo/editor path('editor', Editor.as_view() , name='editor'), ]3）在项目目录下创建静态文件目录如下图：
4）打开python3环境的目录，找到tinymce的目录。
打开目录如下：
5）拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。
6）在项目/settings.py中配置静态文件查找路径。
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]7）在templates/assetinfo/目录下创建editor.html模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义使用tinymce</title> <script type="text/javascript" src='/static/js/tiny_mce_src.js'></script> <script type="text/javascript"> tinyMCE.init({ 'mode':'textareas', 'theme':'advanced', 'width':400, 'height':100 }); </script> </head> <body> <form method="post" action="#"> <textarea name='gcontent'>测试富文本编辑器</textarea> </form> </body> </html>8）运行服务器，在浏览器中输入如下网址：
http://127.0.0.1:8000/assetinfo/editor
通过富文本编辑器产生的字符串是包含html的。在数据库中查询如下：
mysql> select * from assetinfo_goodsinfo; +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ | id | gcontent | goods_name | +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ | 1 | <h1><strong>商品详情：</strong></h1> <ol> <li><strong><strong><strong>详情内容1</strong></strong></strong><hr /></li> <li><em>详情内容2</em><hr /></li> </ol> | 商品1 | +----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+ 1 row in set (0.00 sec) mysql>在模板中显示字符串时，默认会进行html转义，如果想正常显示需要关闭转义。
问：在模板中怎么关闭转义
可以参考Django 2.1.7 模板 - HTML转义
方式一：过滤器safe
方式二：标签autoescape off
1）在assetinfo/views.py中定义类视图Show，用于显示富文本编辑器的内容。
from assetinfo.models import GoodsInfo class Show(View): def get(self, request): goods = GoodsInfo.objects.get(pk=1) context = {'g': goods} return render(request,'assetinfo/show.html', context)2）在assetinfo/urls.py中配置url。
urlpatterns = [ # ex:/assetinfo/show path('show', Show.as_view() , name='show'), ]3）在templates/assetinfo/目录下创建show.html模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展示富文本编辑器内容</title> </head> <body> 显示查询的id号： id:{{g.id}} <br> <hr> 使用autoescape关闭转义：<br> {%autoescape off%} {{g.gcontent}} {%endautoescape%} <hr> 使用safe过滤器，关闭转义：<br> {{g.gcontent|safe}} </body> </html>4）运行服务器，在浏览器中输入如下网址：http://127.0.0.1:8000/assetinfo/show
