【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的格式保存，可以直接显示在网页上