博客后台富文本编辑

博客后台富文本编辑

1.使用html丰富页面

简单文本编辑——>直接贴入html代码

博客前端内容页面需要设置过滤器|safe

<div class="blog-content">{{ blog.content|safe }}</div>

博客前端列表页面需要设置过滤器|striptags过滤模版标签

<p>{{ blog.content|striptags|truncatechars:120 }}</p>

2.富文本编辑——>最终解析成html——>富文本编辑器、markdown编辑器。

使用django-ckeditor

选择标准:具有基本的富文本编辑功能

可以上传图片

可以查看源码

有持续更新(维护)

3.安装django-ckeditor

01、安装pip install django-ckeditor

02、注册应用 'ckeditor'

03、配置model 把字段改成RichTextField,在model中引入ckeditor,因为是注册可以直接引用,

from ckeditor.fields import RichTextField
class Blog(models.Model):
title = models.CharField(max_length=50)
blog_type = models.ForeignKey(BlogType,on_delete=models.CASCADE)
content = RichTextField()
之后生成迁移文件并迁移。


4.添加上传图片功能

01、安装 pip install pillow ,
pillow是一个处理图片用的库,如果没有这个库,图片可能会上传不上去或有显示问题

02、注册应用 'ckeditor_uploader'
03、配置settings
#media MEDIA_URL最终在网站的链接要显示成什么,即访问路径。,MEDIA_ROOT设置文件相对于media保持的位置,保存到根目录下media ,即存储文件
# 上传的内容会传进去,自动创建个upload文件夹,把图片都保存到里边。
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

#配置ckeditor,首先配置一个上传的路径,也就是说要上传到哪里,上传到media,如果没有配置,需要先配置
CKEDITOR_UPLOAD_PATH = 'upload/'

04、配置url ,在总路由,pypi.python.org规定了下面的规范。
path('ckeditor',include('ckeditor_uploader.urls')),
再去设置另外一个东西,上传文件是到media这个文件夹,media这个文件我们是直接访问不到的,我们需要给个链接去访问,
有个简单的设置,我们把media文件的访问路径加进来(开发时可用,部署时不可用),将访问路径映射到本地文件路径
from django.conf.urls.static import static
from . import views

urlpatterns = [
path('',views.home,name='home'),
path('admin/', admin.site.urls),
path('ckeditor',include('ckeditor_uploader.urls')),
path('blog/', include('blog.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

#settings.MEDIA_URL,设置一个路径,路径指向document_root

05、配置model 把字段改成RichTextUploadingField
修改以前的model
from ckeditor_uploader.fields import RichTextUploadingField

class BlogType(models.Model):
type_name = models.CharField(max_length=15)

def __str__(self):
return self.type_name

class Blog(models.Model):
title = models.CharField(max_length=50)
blog_type = models.ForeignKey(BlogType,on_delete=models.CASCADE)
content = RichTextUploadingField()
之后生成迁移文件并迁移。

5.有时前端导入图片,显示图片时。
model定义FileField和ImageField用于上传文件和图片,定义好upload_to参数,文件最终会放在MEDIA_ROOT目录的“upload_to”子目录中。
views函数接收并保存图片,接收时用request.Files.get(),保存user = User.objects.create(name=name, pic=file)

所有真正被保存在数据库中的,只是指向你上传文件路径的字符串而已。可以通过url属性,在Django的模板中方便的访问这些文件。
例如,假设有一个ImageField字段,名叫mug_shot,那么在Django模板的HTML文件中,可以使用{{ user.mug_shot.url }}来获取该文件。
回显图片,设置静态资源根目录,STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), MEDIA_ROOT ]
模板中使用,

{% load static %}

<img src="{% static user.headpic.url %}" width="50px">





原文地址:https://www.cnblogs.com/lag1/p/13829102.html