博客-富文本编辑器

  在这一节使用的是kindeditor富文本编辑器, 下载地址 官方文档, 官网只更新到了4.1.11, github更新到了4.1.12, 往下直接就是代码示例

1、settings.py

使用自己定义的用户模块
AUTH_USER_MODEL = "app01.UserInfo"

# 静态文件目录， 可以放js css image之类的文件
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]

# 用户上传的都叫media文件
MEDIA_URL = "/media/"

# media配置，用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

2、urls.py

from django.urls import path, re_path, include
urlpatterns = [
path("blog/", include("app01.urls"), name="blog"),
]

3、创建应用

python manage startapp blog

settings.py文件中注册应用

INSTALLED_APPS = [
# 最后新增这一行
'app01.apps.App01Config',
]

blog应用中创建urls.py文件

from django.urls import path, re_path, include
from app01 import views
app_name = "blog"

urlpatterns = [
# 添加文件
re_path("add_article/", views.add_article, name="add_article"),
# 上传图片函数
re_path("comment_article/", views.comment_article, name="comment_article"),

]

4、表结构

  来源老男孩的课程

from django.db import models

# Create your models here.

from django.contrib.auth.models import AbstractUser

class UserInfo(AbstractUser):
"""
用户信息表
"""
nid = models.AutoField(primary_key=True)
portrait = models.FileField(upload_to="images/", default="", verbose_name="头像")
create_time = models.DateTimeField(auto_now_add=True)

blog = models.OneToOneField(to="Blog", to_field="nid", null=True, on_delete=models.CASCADE)

def __str__(self):
return self.username

class Meta:
verbose_name = "用户"
verbose_name_plural = verbose_name

class Blog(models.Model):
"""
博客信息
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(max_length=64)  # 个人博客标题
site = models.CharField(max_length=32, unique=True)  # 个人博客后缀
theme = models.CharField(max_length=32)  # 博客主题

def __str__(self):
return self.title

class Meta:
verbose_name = "blog站点"
verbose_name_plural = verbose_name

class Category(models.Model):
"""
个人博客文章分类
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(max_length=32)  # 分类标题
blog = models.ForeignKey(to="Blog", to_field="nid", on_delete=models.CASCADE)  # 外键关联博客，一个博客站点可以有多个分类

def __str__(self):
return self.title

class Meta:
verbose_name = "文章分类"
verbose_name_plural = verbose_name

class Tag(models.Model):
"""
标签
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(max_length=32)  # 标签名
blog = models.ForeignKey(to="Blog", to_field="nid", on_delete=models.CASCADE)  # 所属博客

def __str__(self):
return self.title

class Meta:
verbose_name = "标签"
verbose_name_plural = verbose_name

class Article(models.Model):
"""
文章
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(max_length=50, verbose_name="文章标题")  # 文章标题
desc = models.CharField(max_length=255)  # 文章描述
create_time = models.DateTimeField(auto_now_add=True)  # 创建时间

# 评论数
comment_count = models.IntegerField(verbose_name="评论数", default=0)
# 点赞数
up_count = models.IntegerField(verbose_name="点赞数", default=0)
# 踩
down_count = models.IntegerField(verbose_name="踩数", default=0)

category = models.ForeignKey(to="Category", to_field="nid", null=True, on_delete=models.CASCADE)
user = models.ForeignKey(to="UserInfo", to_field="nid", on_delete=models.CASCADE)
tags = models.ManyToManyField(  # 中介模型
to="Tag",
through="Article2Tag",
through_fields=("article", "tag"),  # 注意顺序！！！
)

def __str__(self):
return self.title

class Meta:
verbose_name = "文章"
verbose_name_plural = verbose_name

class ArticleDetail(models.Model):
"""
文章详情表
"""
nid = models.AutoField(primary_key=True)
content = models.TextField()
article = models.OneToOneField(to="Article", to_field="nid", on_delete=models.CASCADE)

class Meta:
verbose_name = "文章详情"
verbose_name_plural = verbose_name

class Article2Tag(models.Model):
"""
文章和标签的多对多关系表
"""
nid = models.AutoField(primary_key=True)
article = models.ForeignKey(to="Article", to_field="nid", on_delete=models.CASCADE)
tag = models.ForeignKey(to="Tag", to_field="nid", on_delete=models.CASCADE)

class Meta:
unique_together = (("article", "tag"),)
verbose_name = "文章-标签"
verbose_name_plural = verbose_name

def __str__(self):
return "{} - {}".format(self.article.title, self.tag)

class ArticleUpDown(models.Model):
"""
点赞表
"""
nid = models.AutoField(primary_key=True)
user = models.ForeignKey(to="UserInfo", null=True, on_delete=models.CASCADE)
article = models.ForeignKey(to="Article", null=True, on_delete=models.CASCADE)
is_up = models.BooleanField(default=True)

class Meta:
unique_together = (("article", "user"),)
verbose_name = "文章点赞"
verbose_name_plural = verbose_name

class Comment(models.Model):
"""
评论表
"""
nid = models.AutoField(primary_key=True)
article = models.ForeignKey(to="Article", to_field="nid", on_delete=models.CASCADE)
user = models.ForeignKey(to="UserInfo", to_field="nid", on_delete=models.CASCADE)
content = models.CharField(max_length=255)  # 评论内容
create_time = models.DateTimeField(auto_now_add=True)
parent_comment = models.ForeignKey("self", null=True, blank=True, on_delete=models.CASCADE)  # blank=True 在django admin里面可以不填

def __str__(self):
return self.content

class Meta:
verbose_name = "评论"
verbose_name_plural = verbose_name

迁移数据
python manage makemigrations
python manage migrate
每次修改完modle.py文件都需要执行这两行迁移数据命令， 执行完之后可以应用中的migrations包中看到执行的sql语句

5、views.py

视图函数
def add_article(request):
print(request.POST)
if request.method == "POST":
title = request.POST.get("title")
content = request.POST.get("textarea_content")
user = request.user
article_obj = Article.objects.create(user=user, title=title, desc=content[0:50])
ArticleDetail.objects.create(content=content, article=article_obj)
return HttpResponse("添加成功")

return render(request, "blog/add_article.html")

def comment_article(request):
print(request.FILES)
filename = request.FILES.get("image_obj")
path = os.path.join(settings.MEDIA_ROOT, "user_upload", filename.name)
with open(path, "wb") as F:
for line in filename:
F.write(line)
urls = "/media/user_upload/{0}".format(filename.name)
res = {
"error": 0,
"url": urls,
}

'''
//成功时 http://kindeditor.net/docs/upload.html
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
"error" : 1,
"message" : "错误信息"
}

'''
return JsonResponse(res)

6、add_article.html

在templaters中新建blog文件夹 创建add_article.html文件
{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div id="Editor_Edit">
<div id="Editor_Edit_Header" class="CollapsibleTitle">
<span id="Editor_Edit_headerTitle">添加文章</span>
</div>
<form action="" method="post">
<div>
<label for="">标题</label>
<input type="text" class="form-control" style="height: 30px;" name="title">
</div>
<div class="Editor_content">
<p>内容(kindeditor编辑器，点击上传图片,可批量上传)</p>
<textarea cols="80px" rows="10px" name="textarea_content" id="editor_id"></textarea>
<input type="submit" value="提交文章">
</div>
{% csrf_token %}
</form>
</div>
</div>
</div>
</div>

<script charset="utf-8" src="{% static 'kindeditor/kindeditor-all.js' %}"></script>
<script src="{% static 'jquery-3.3.1.js' %}"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width: '100%',
height: "400px",
resizeType: 1,
uploadJson: "{% url 'blog:comment_article' %}",
extraFileUploadParams: {
csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()
},
filePostName: "image_obj",
});
});
</script>

{% endblock %}

base.html文件
index.html用于主页展示
public.css 样式文件
看附件

效果图

上传图片

保存之后在页面中展示会如下， 样式会乱

7、引入beautifulsoup4

安装 pip install beautifulsoup4

修改视图函数 views.py
from bs4 import BeautifulSoup

def add_article(request):
print(request.POST)
if request.method == "POST":
title = request.POST.get("title")
content = request.POST.get("textarea_content")
user = request.user
bs = BeautifulSoup(content, "html.parser")  # 将html解析成字符串
desc = bs.text[0:50]+"...."   # 只要前50个字符并且加上...
article_obj = Article.objects.create(user=user, title=title, desc=desc)
ArticleDetail.objects.create(content=content, article=article_obj)
return HttpResponse("添加成功")

return render(request, "blog/add_article.html")

重新添加带有html标签的文章

最终显示就正常了

过滤html标签
def add_article(request):
print(request.POST)
if request.method == "POST":
title = request.POST.get("title")
content = request.POST.get("textarea_content")
user = request.user
bs = BeautifulSoup(content, "html.parser")  # 将html解析成字符串
desc = bs.text[0:50]+"...."   # 只要前50个字符并且加上...

# 查看所有的html标签
for line in bs.find_all():
# 如果名称中包含script标签或者其它，那么就删除它
if line.name in ["script"]:
line.decompose()

article_obj = Article.objects.create(user=user, title=title, desc=desc)
# 将删除标签之后的文本保存到数据库中
ArticleDetail.objects.create(content=str(bs), article=article_obj)
return HttpResponse("添加成功")

return render(request, "blog/add_article.html")