【Django 027】tinymce富文本框使用详解
针对博客和论坛类网站，用户需要在网页的富文本框中输入内容传递到后端。那么Django项目如何生成一个包含富文本框的页码，又如何获取用户上传的富文本内容呢？这一节我们就一起来看看。
我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。
富文本框
所谓富文本（Rich Text Format, RTF），就是包含各种格式的文字。
大家熟悉的markdown就是一种生成带格式文字的工具，不过markdown使用特殊符号来形成格式，而富文本框就是通过点击按钮来生成带格式文字的工具。下图是个典型的富文本框
Django的富文本框插件
这里我们使用tinymce插件来实现网页中的富文本框。网上有很多别的插件，使用方法都差不多，tinymce如果觉得不够炫酷，也可以找别的插件。重要的是知其所以然。
安装tinymce
直接pip install django-tinymce或者在pycharm的设置中安装
注册tinymce
有些python模块安装好后就可以直接被当作一个应用加入到django项目中，这个tinymce就是其中之一。
后面我们在学习如何自己写可以重复使用的django应用
- 首先在项目的
settings.py的INSTALLED_APPS中添加tinymce - 同时在
settings.py中添加一个默认配置
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 800,
'height': 600,
}
创建数据模型
用户上传的富文本需要用专门的字段来存储，这个tinymce也替我们想到了。
from django.db import models
# Create your models here.
from tinymce.models import HTMLField
class Blog(models.Model):
b_content = HTMLField()
这里的HTMLField继承自models.TextField.
之后迁移到数据库，看看DDL如下
create table App_blog
(
id int auto_increment
primary key,
b_content longtext not null
);
其实就是一个SQL中的longtext字段
创建HTML页面
下面开始在页面中应用，虽说随着前后的分离，网页主要是前端生成，不过这里为了演示方便采用django后端生成的方式。
富文本还可以在后台管理中使用，后面我们再学
创建一个页面blog.html如下
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit Blog</title>
<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
'mode':'textareas',
'theme': 'silver',
'width': 800,
'height': 600,
});
</script>
</head>
<body>
<form action="#", method="post">
{% csrf_token %}
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
这个页面有下面几点要说明
- 要应用tinymce中的一个静态js文件，这里用的是绝对路径。如果要用相对路径，之前说过app级别的配置为
STATIC_URL，项目级别的配置为STATICFILES_DIRS，配置为STATIC_URL = '/static/'的情况下可以用下面的方式
<script type="text/javascript" src="{% static 'tinymce/tinymce.min.js' %}"></script>
- 不同版本的tinymce对应的js文件名也不一致，我下载的tinymce版本是3.0.2，名称为
tinymce.min.js，根据实际情况去填写，不然在浏览器的console会有404的报错 - 同样的
theme也要根据实际的名字去填写，不然会有404报错
之后创建如下路由和view函数
path('editblog/', views.edit_blog, name='edit_blog'),
def edit_blog(request):
return render(request, 'blog.html')
请求页面结果如下
富文本数据模型
下面将数据传递到后端看看这些带格式的文字究竟是如何存储的。
修改下h5页面，加入提交按钮和链接
<body>
<form action="{% url 'app:edit_blog' %}", method="post">
{% csrf_token %}
<textarea name="content" id="" cols="30" rows="10"></textarea>
<input type="submit">
</form>
</body>
修改下view函数
def edit_blog(request):
if request.method == 'GET':
return render(request, 'blog.html')
elif request.method == 'POST':
content = request.POST.get('content', '')
blog = Blog()
blog.b_content = content
blog.save()
return HttpResponse('saved')
编辑一下富文本，然后提交
进数据库中查看，发现存储的就是HTML
将这段HTML直接显示在网页上就变成了含有格式的文字。
总结
几个知识点总结下
- 实现富文本的插件有很多，不能局限于tinymce
- 不同版本的tinymce下载后包含的js和theme的名字会有所差异
- 富文本发送到后端还是以HTML的格式保存，可以直接显示在网页上
上一篇： mysql备份和恢复命令_MySQL