博客后台富文本编辑

博客后台富文本编辑

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">