c# 富文本编辑器图片粘贴上传处理_python django富文本(RichText)编辑器，上传文件、图片、表格...

django自带编辑器较为简陋，只有简单的文字等功能，所以需要使用第三方富文本编辑器。

很多推荐百度的UEditor，由于百度的UEditor已经很久没更新了，而且在django上安装起来非常困难，所以改用ckeditor，发现其功能很完善，也很简单适用。django-ckeditor是集成ckeditor富文本编辑器的django第三方库。可在admin后台使用ckeditor富文本编辑器编辑内容，令页面更加丰富。同时该富文本编辑器也可用于form类。

本文使用到的相关版本： Python >=3.6.8 Django >=2.1.7(不要用2.2，有admin bug) django-ckeditor 5.7.0 Pillow 5.1.0 django-uuslug 1.1.8

一、初步使用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后台管理界面即可看到效果：

若你需要编辑器的语言是简体中文，设置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后台编辑页面，点击上传图片按钮可看见上传功能：

至此 ，django的富文本编辑器功能已经全部启用，下期将拓展其功能

拓展ckeditor功能：更改字体、大小、背景色、高亮等功能