富文本编辑器
2018-09-10 本文已影响2188人
垃圾桶边的狗
image
(1)首先配置setting.py
INSTALLED_APPS = [
....
'App',
'tinymce'
]
# 富文本编辑器的配置
TINMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 600,
'height': 400
}
(2)创建models
from django.db import models
from tinymce.models import HTMLField
# Create your models here.
class Posts(models.Model):
title = models.CharField(max_length=20)
content = HTMLField()
class Meta:
db_table = 'posts'
执行迁移
python manage.py makemigrations
python manage.py migrate
msq.png
(3)创建index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
'mode':'textareas',
'width':800,
'height':600,
})
</script>
</head>
<body>
<form action="/" method="POST">
{% csrf_token %}
<p>标题 <input type="text" name="title" placeholder="请输入标题" maxlength="20" required></p>
<textarea name="content" id="" cols="30" rows="10"></textarea>
<input type="submit">
</form>
</body>
</html>
启动：
python manage.py runserver
en.png
(4)将数据存到数据库
def index(req):
if req.method == 'GET':
return render(req,'index.html')
if req.method == 'POST':
Posts(title=req.POST.get('title'),content=req.POST.get('content')).save()
return HttpResponse('存好了，嘿嘿😝')
(5)将数据在Adimi后台显示
python manage.py createsuperuser
admin.py
from django.contrib import admin
from App.models import Posts
# Register your models here.
admin.site.register(Posts)
登陆admin
en a.png
在前台展示
views.py
def showCon(req):
p = Posts.objects.all()
return render(req,'showCon.html',{'data':p})
show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
{% for row in data %}
<tr>
<td>{{ row.title }}</td>
{%# 如果不加safe 就不会解析html页面#%}
<td>{{ row.content|safe }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
这个链接讲的也很好的
https://blog.csdn.net/zd147896325/article/details/79159945
image
