版权声明:版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z564359805/article/details/90081279
首先安装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)