![46. Django 2.1.7 使用富文本编辑器 tinymce_Django教程](https://s2.51cto.com/images/blog/202106/18/8ceb003642b961719c1c165c7eb1aecf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
富文本编辑器
借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。
在虚拟环境中安装包。
pip3 install django-tinymce
安装完成后,可以使用在Admin管理中,也可以自定义表单使用。
安装tinymce应用
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后台使用。
在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_name
2)执行迁移数据。
python3 manage.py makemigrations
python3 manage.py migrate
3) 在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/
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_02](https://s2.51cto.com/images/blog/202106/18/3b3c5e37b539b81190ced9943f40f0c4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![46. Django 2.1.7 使用富文本编辑器 tinymce_Django教程_03](https://s2.51cto.com/images/blog/202106/18/774b9b15c9bdf2b8de04b19a73315ef2.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
保存之后,如下:
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_04](https://s2.51cto.com/images/blog/202106/18/c19793188c6b52b60998d88b9045fb81.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
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)在项目目录下创建静态文件目录如下图:
![46. Django 2.1.7 使用富文本编辑器 tinymce_Django教程_05](https://s2.51cto.com/images/blog/202106/18/07153d7c7738265a3f075dc754303bb0.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
4)打开python3环境的目录,找到tinymce的目录。
![46. Django 2.1.7 使用富文本编辑器 tinymce_Django教程_06](https://s2.51cto.com/images/blog/202106/18/82dd8d78a17f5edd07f6da99520593eb.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
打开目录如下:
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_07](https://s2.51cto.com/images/blog/202106/18/6e90ea586607092d501143ef9d388093.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
5)拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下。
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_08](https://s2.51cto.com/images/blog/202106/18/5e2e32f11b2e99f817d7394cbe1f1165.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
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
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_09](https://s2.51cto.com/images/blog/202106/18/5d3c0a414246b576a6048d4f2951504e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
显示富文本编辑的内容
通过富文本编辑器产生的字符串是包含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
![46. Django 2.1.7 使用富文本编辑器 tinymce_Python_10](https://s2.51cto.com/images/blog/202106/18/ae9cd7bdd8d70a2c90e8616090f9bf32.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)