django-ckeditor后台富文本编辑器

发表于 | 分类于

安装 django-ckeditor

1 使用 pip 安装

1
pip install django-ckeditor

2 注册到 django 项目中的 setting.py 在 INSTALLED_APPS 中加入 ‘ckeditor’

1
2
3
4
INSTALLED_APPS = [
    # ...
    'ckeditor',
]

3 打开对应需要修改为富文本编辑的模型文件 models.py。例如我有个Blog模型：

1
2
3
4
5
6
from django.db import models
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = models.TextField()

其中，title是博客标题，content是博客内容。博客内容需要富文本编辑，则改成如下：

1
2
3
4
5
6
7
from django.db import models
from ckeditor.fields import RichTextField
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextField()

若你需要编辑器的语言是简体中文，设置settings.py的LANGUAGE_CODE = 'zh-hans'。注意这里zh-hans都是小写。我发现写zh-Hans显示为繁体。另外，此时无法从本地上传图片，只能使用网络图片。可添加上传图片功能。

添加上传图片功能

1）安装pillow库

pillow库是图片处理库，上传图片需要该库。执行pip命令安装：

1
pip install pillow

2）注册ckeditor_uploader应用

django-ckeditor将上传文件的功能迁移到ckeditor_uploader应用中，所以需要注册该应用。同样打开settings.py：

1
2
3
4
5
INSTALLED_APPS = [
    # ...
    'ckeditor',
    'ckeditor_uploader',
]

3）配置settings

使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：

1
2
3
4
5
6
MEDIA_URL = '/media/'

#放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
CKEDITOR_UPLOAD_PATH = 'upload/'

4）配置上传url和media的访问

上传功能需要有地址可以请求，需要需要提供上传的url。打开全局的urls.py，添加设置到urlpatterns中：

1
path('ckeditor/', include('ckeditor_uploader.urls')),

注意，这里我用的是django2.0。django1.x设置如下：

1
url(r'^ckeditor/', include('ckeditor_uploader.urls')),

另外，上传的图片是到media中，不是在static中。我们还需要设置media可被访问，如下设置可用于开发中使用，若部署到服务器可用服务器软件设置：

1
2
3
4
from django.conf import settings
from django.conf.urls.static import static
 
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

5）修改model

上面的RichTextField不可用于上传文件，需要修改model如下：

1
2
3
4
5
6
7
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextUploadingField()

到这里，可以愉快使用富文本编辑功能。其它具体配置和说明可见pypi。