富文本编辑器Django-ckeditor

痛定思痛。 2021-12-15 02:19 316阅读 0赞

# 富文本编辑器Django-ckeditor #

# 前言 #

刚开始学习django的时候，在后台编辑数据的时候，总是在想，功能是否太简陋了点，只能做简单的文本编辑，所以在这里记录一个富文本编辑器Django-ckeditor。

选择标准：
    具有基本的富文本编辑功能
    可以上传图片
    可以查看源码
    有持续更新（维护）

# 使用 #

1.安装jango-ckeditor

pip install django-ckeditor

![1477786-20190322193826239-964940811.png][]

2.注册ckeditor应用

在settings.py文件的INSTALLED\_APPS下加入

'ckeditor',

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

INSTALLED_APPS = [
        # ...
        'ckeditor',
    ]

3.配置model

在model.py文件下

包导入
    1.from ckeditor.fields import RichTextField
    
    将数据显示字段替换为RichTextField
    2.content=RichTextField()

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

其中，title是博客标题，content是博客内容。博客内容需要富文本编辑，则改成如下：
    from django.db import models
    from ckeditor.fields import RichTextField
     
     
    class Blog(models.Model):
        title = models.CharField(max_length=50)
        content = RichTextField()

4.数据库

python manage.py makemigrations
    python manage.py migrate

![1477786-20190322194607266-132416887.png][]

# 添加文件上传功能 #

一些常用的功能我们可以在菜单栏使用，但是图片上传功能的没有的，我们还需要配置

![1477786-20190322194748862-1900492032.png][]

点击菜单栏的图片这个图标，里面没有图片上传的功能

![1477786-20190322194914643-1990826955.png][]

现在我们来添加这个功能

1.安装

pip install pillow

2.注册应用(配置app)

'ckeditor_uploader',

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

INSTALLED_APPS = [
        # ...
        'ckeditor',
        'ckeditor_uploader',
    ]

3.配置settings

2.配置上传路径、设置文件上传静态目录
    MEDIA_URL="/media/"
    MEDIA_ROOT=os.path.join(BASE_DIR, 'media')
    CKEDITOR_UPLOAD_PATH="upload/"
    #配置上传的路径：
    #当文件第一次上传到服务器，会自动在media目录下创建一个文件夹upload用来保存文件

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：
    MEDIA_URL = '/media/'
    # 放在django项目根目录，同时也需要创建media文件夹
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
     
    CKEDITOR_UPLOAD_PATH = 'upload/'

4.配置url

from django.conf import settings
    from.conf.urls.static import static
    from django.urls import include,path
    
    path('ckeditor',include('ckeditor_uploader.urls'))
    
    urlpatterns +=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

5.配置model

from ckeditor_uploader.fields import RichTextUploadingField
    把数据字段改成RichTextUploadingField

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

from django.db import models
    from ckeditor_uploader.fields import RichTextUploadingField
     
     
    class Blog(models.Model):
        title = models.CharField(max_length=50)
        content = RichTextUploadingField()

6.数据库

python manage.py makemigrations
    python manage.py migrate

**现在就有图片上传的功能**

![1477786-20190322203311677-404422347.png][]

**我们选择一张图片进行上传，点击上传 **

![1477786-20190322203334877-1684679732.png][]

** 服务端接收到图片**

![1477786-20190322203427411-740286536.png][]

**最后在浏览器显示图片**

![1477786-20190322212530161-183429203.png][]

转载于:https://www.cnblogs.com/-wenli/p/10581077.html

[1477786-20190322193826239-964940811.png]: /images/20211214/0a3090b93e634e7581efd8318efec2bd.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/08c9bd5ed1704e2b944c53dfdc9ceb79.png
[1477786-20190322194607266-132416887.png]: /images/20211214/58a96488608342cd8ae87e7f778ff62b.png
[1477786-20190322194748862-1900492032.png]: /images/20211214/7d17eff95c0e4961bb90c884e255fe49.png
[1477786-20190322194914643-1990826955.png]: /images/20211214/64817391f5174d5a8b094aba959adfbb.png
[1477786-20190322203311677-404422347.png]: /images/20211214/227d169c71214653a4ccf4c2a721abb8.png
[1477786-20190322203334877-1684679732.png]: /images/20211214/89078ac52cd24fa38bb55f95f410167b.png
[1477786-20190322203427411-740286536.png]: /images/20211214/8011e0ba7f00468293a1e74785285e04.png
[1477786-20190322212530161-183429203.png]: /images/20211214/207572f52f154de6be2f3c5faf68600d.png