Djange学习[27] 富文本插件

博主： justin
发布时间：2024 年 03 月 13 日
51 次浏览
关闭评论
8120字数
分类： Python

准备工作

我们新建一个项目day7并且新建应用App

接着我们在setttings中注册App,并且这一次我们不用切换数据库直接用。

我们在App中新建urls路由:

from django.conf.urls import url

from App import views

urlpatterns = [
]

在day7的总urls中注册App的urls:

from django.contrib import admin
from django.urls import path, include

import App

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app/', include(('App.urls', 'App'), namespace='app')),
]

我们在app中新建url，用来测试是否正常：

from django.conf.urls import url

from App import views

urlpatterns = [
    url(r'^index/', views.index, name='index'),
]

views:

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request):
    return HttpResponse('index')

然后python manage.py migrate迁移

再运行服务器查看测试网页

测试完成

富文本介绍

富文本:Rich Text Format（RTF），是有微软开发的跨平台文档格式，大多数的文字处理软件都能读取和保存RTF文档，其实就是可以添加样式的文档，和HTML有很多相似的地方

设计初衷

做博客，做论坛使用的，博客论坛是为了写带格式的文本（比如加粗，标题123）

常见的富文本

RTF

富文本其实就是带格式的文字，常见的格式有RTF
RTF其实就是常见的word文档的一种格式：

在线富文本编辑器

可以设置各种字体啊，加粗，倾斜，等等的，有这些选项的框框，也是富文本

（PS:富文本和目前流行的markdown类似）

Django调用富文本

下载所需的模块

富文本在DJango中也有支持的插件，这里我们用到的是tinymce这个模块。

首先安装这个模块：pip install django-tinymce

富文本使用的位置

在后台管理中使用

后台中使用需要配置settings.py文件：

INSTALLED_APPS 添加 tinymce

添加默认配置
```
TINYMCE_DEFAULT_CONFIG = {
              'theme':'advanced',        # 高级的
              'width':800,            # 宽带
              'height':600,            # 高度
          }
```
（由于目前尚未学习后台管理，我们只能在网页中使用）
在页面中使用，通常用来做博客
在页面中使用也需要完成在后台管理使用的步骤（注册，添加配置）
建立模型类
我们还需要创建自己的模型类：（在models中）
```
from tinymce.models import HTMLField
class Blog(models.Model):
  b_content = HTMLField()
```

这个HTMLField()通过研究源代码发现：

class HTMLField(models.TextField):

是继承了TextField的，这样可以通过ORM进行操作

接下来我们需要迁移模型： python manage.py makemigrations
python manage.py migrate

之后我们连接上sqlite3数据库：

可以看到我们刚刚迁移生成的表
接着查看DDL

可以看到b_content 属性就是text

在网页中使用富文本

在页面中存这么多文字，我们利用文本域来存储，比如评论，等等需要输入好长文本的使用文本域。

（而只需要输入比较短的文本，我们只需要使用input 标签即可）

首先添加url:

url(r'^editblog/', views.edit_blog, name='edit_blog'),

views: 我们需要返回一个渲染好的页面，然后将富文本也渲染进去。

def edit_blog(request):
    return render(request, 'edit_blog.html')

之后我们在模板中创建一个edit_blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editblog</title>
</head>
<body>

</body>
</html>

接着我们要将tinymce导入过来，渲染的样式，按钮点击什么的都是需要JS来点

导入tinymce至html模板：

先在最上方加载static，虽然我们自己没有创建static文件夹，但是static不限于我们自己创建的，我们这里调用的是tinymce中自带的static
```
{% load static %}
```
添加script标签，将tiny_mce的样式包导入进html

在导入之前，我们查找一下这个包长啥样,双击shift，搜索tiny_mce.js，打开

这个是因为变态压缩版本，将代码的格式压缩到最简，空格和换行符都被压缩掉

这个时候我们可以看到tinymce自带了一个static，并且static中有tiny_mce.js文件，我们将这个路径填入html中就可以导入js了：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editblog</title>
    <script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>

</head>
<body>

</body>
</html>

由于我们才刚导入了js，没有使用过，所以下一步我们要将js与我们的页面中的文本域进行绑定，规定js初始化时的格式。
所以我们还要添加一个script标签来规定初始化模式，指定和文本域进行绑定
(8-14行)

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editblog</title>
    <script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>
    <script >        {# 这里不可以有type="text/javascript" 不然会出现只显示文本框而没有工具栏#}
        tinyMCE.init({
            'model': 'textareas', {# 绑定控件 #}
            'theme': 'advanced',
            'width': 800,
            'height': 600
        })
    </script>
</head>
<body>

</body>
</html>

补充：script标签：https://www.w3school.com.cn/tags/tag_script.asp
接着我们写form表单：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editblog</title>
    <script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>
    <script>
     tinyMCE.init({
       'mode':'textareas',
       'theme':'advanced',
        'width':450,
       'height':300
    })</script>

</head>
<body>
<form action="#" method="post">
    {% csrf_token %}
    <textarea >

    </textarea>
</form>

</body>
</html>

然后我们访问网页，成功。

接着我们需要添加一个按钮用来提交，完善form的地址,并且提交之后在后端打印出我们输入的文字。
html:

<body>
<form action="{% url 'App:edit_blog' %}" method="post">
    {% csrf_token %}
    <textarea name='content'>        # 给这个文本域起一个名字，这样在views中就能获取到文本域中提交的内容

    </textarea>
    <button> 保存</button>
</form>

</body>

然后我们修改一下视图views:

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from App.models import Blog


def index(request):
    return HttpResponse('index')


def edit_blog(request):
    if request.method == 'GET':  # 如果是请求访问网站，就是返回网页给客户端
        return render(request, 'edit_blog.html')
    elif request.method == 'POST':  # 如果是提交，那么就把提交的内容存到数据库中，并且在终端中打印
        content = request.POST.get('content')
        print(content)  # 这里打印出获取到的内容
        
        blog = Blog()   # 将获取到的文本存储到数据库中
        blog.b_content = content
        blog.save()
        return HttpResponse('提交成功')

接下来测试