django-ckeditor后台富文本编辑器

  • 发布时间:2018年2月5日 19:26
  • 作者:杨仕航
  • 分类标签: Django
  • 阅读(1789)
  • 评论(2)

之前写过Django富文本编辑器的文章,使用UEditor改造前端页面的富文本编辑器。用起来感觉一般,而且好像百度已经很久没有维护了。近期在录制Django2.0视频教程,需要一款更好的富文本编辑器作为教程内容讲解。需要使用方便、配置简单、可上传图片、可查看和编辑html源码的富文本编辑器。最后找到django-ckeditor。

django-ckeditor是集成ckeditor富文本编辑器的django第三方库。可在admin后台使用ckeditor富文本编辑器编辑内容,另页面更加丰富。同时该富文本编辑器也可用于form类。具体说明可见pypi。接下来具体讲解如何使用。

本文使用到的相关版本:  Python 3.6  Django 2.0  django-ckeditor 5.4.0  Pillow 5.0.0


1、初步使用django-ckeditor

1)安装django-ckeditor

使用pip安装,目前我安装的版本是5.4.0:

pip install django-ckeditor


2)注册ckeditor应用

打开django项目的settings.py文件,在INSTALLED_APPS中加入'ckeditor',如:

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


3)修改模型

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

from django.db import models


class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = models.TextField()


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

from django.db import models
from ckeditor.fields import RichTextField


class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextField()


修改完成之后,同步数据库,再打开admin后台管理界面即可看到效果:

20180205/20180205184338170.png


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


2、添加上传图片功能

1)安装pillow库

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

pip install pillow


2)注册ckeditor_uploader应用

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

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


3)配置settings

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

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

CKEDITOR_UPLOAD_PATH = 'upload/'


当然,media设置根据你具体的项目设置,这里是提供参考。


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

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

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


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

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


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

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如下:

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField


class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextUploadingField()


配置完成之后,重新刷新Blog admin后台编辑页面,点击上传图片按钮可看见上传功能:

20180205/20180205192306740.png


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

另外,本篇博客有对应的视频教程:【Django2.0教程】17.博客后台富文本编辑 欢迎围观~~


上一篇:没有了

下一篇:MySQL在Linux自动定时备份功能

评论列表

1049759078

1049759078

这个能分屏预览吗

2018-03-29 22:58 回复

  • 1049759078

    就是像简书的编辑器那样,左边写 右边就可以预览

    2018-04-01 21:53 回复

新的评论

清空

猜你喜欢

  • 猜测中,请稍等...