Django自学笔记之富文本编辑器

首先安装django-tinymce：

pip install django-tinymce

在settings.py中为INSTALLED_APPS添加编辑器应用和添加编辑配置项

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'booktest',
    'tinymce',# 富文本框
]


# 富文本框
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}

models.py中增加模型类：

from django.db import models
from tinymce.models import HTMLField

# 富文本框
class EditInfo(models.Model):
    content = HTMLField('正文内容')

数据库迁移和创建表结构（应用名：booktest，数据库中会生成booktest_editinfo表）：

python manage.py makemigrations

python manage.py migrate

views.py中：

from django.shortcuts import render

# 自定义富文本编辑器
def htmlEditor(request):
    return render(request,'htmlEditor.html')

# 通过富文本编辑器修改和增加数据，并在htmlShow页面中展示
def htmlHandle(request):
    # 内容
    html = request.POST['hcontent']
    # 发布者
    hname = request.POST['hname']
    # 修改第一条数据
    # text1 = EditInfo.objects.get(pk=1)
    # text1.content = html
    # text1.save()
    # 增加数据
    text1 = EditInfo()
    text1.content = html
    text1.save()
    context = {
        'hname':hname,
        'content':html
               }
    return render(request,'htmlShow.html',context)

在urls.py中：

from django.urls import path

urlpatterns = [
    path('htmlEditor/',views.htmlEditor),
    path('htmlHandle/',views.htmlHandle),
]

在 templates中添加htmlEditor.html和htmlShow.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlEditor页面</title>
     <script type="text/javascript" src='/static/tiny_mce/tiny_mce.js'></script>
    <script type="text/javascript">
        tinyMCE.init({
            'mode':'textareas',
            'theme':'advanced',
            'width':400,
            'height':500
        });
    </script>
</head>
<body>
<form method="post" action="/htmlHandle/">
    {% csrf_token %}
    发布者：<input type="text" name="hname">
    <br>
    <br>
    正文内容：
    <br>
    <br>
    <textarea name='hcontent'>哈哈，这是啥呀</textarea>
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

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

发布者：{{hname}}
<hr>
<!--safe关闭转义-->
内容：{{content|safe}}

</body>
</html>

也可以将富文本框注册到admin中：

from django.contrib import admin
from .models import *

# admin中注册富文本框
admin.site.register(EditInfo)

启动服务输入：http://127.0.0.1:8000/htmlEditor/

Django自学笔记之富文本编辑器

猜你喜欢