【Django 027】tinymce富文本框使用详解

针对博客和论坛类网站，用户需要在网页的富文本框中输入内容传递到后端。那么Django项目如何生成一个包含富文本框的页码，又如何获取用户上传的富文本内容呢？这一节我们就一起来看看。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

文章目录

富文本框
Django的富文本框插件
- 安装tinymce
- 注册tinymce
- 创建数据模型
- 创建HTML页面
- 富文本数据模型
总结

富文本框

所谓富文本（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 HTMLFieldclass Blog(models.Model):b_content = HTMLField()

这里的HTMLField继承自models.TextField.

之后迁移到数据库，看看DDL如下

create table App_blog
(id        int auto_incrementprimary 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 = contentblog.save()return HttpResponse('saved')

编辑一下富文本，然后提交

进数据库中查看，发现存储的就是HTML

将这段HTML直接显示在网页上就变成了含有格式的文字。

总结

几个知识点总结下

实现富文本的插件有很多，不能局限于tinymce
不同版本的tinymce下载后包含的js和theme的名字会有所差异
富文本发送到后端还是以HTML的格式保存，可以直接显示在网页上