django - 富文本 pillow 库

富文本

富文本编辑器提供了类似 Microsoft Word 的编辑功能，可在 admin 后台使用富文本编辑器编辑内容，令页面更加丰富，常用于实现 Text 类型的文本录入。

可以实现富文本的第三方库有很多，我们这里主要介绍 django-ckeditor ，是集成 ckeditor 富文本编辑器的 django 第三方库，与 admin 模块无缝集成使用。

django-ckeditor

---

在 admin 中配置富文本

1. 安装 django-ckeditor

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()

效果图：

注意:

若你需要编辑器的语言是简体中文，设置 settings.py 的 LANGUAGE_CODE = 'zh-hans'。
另外，此时无法从本地上传图片，只能使用网络图片；可额外添加上传图片功能。

---

在 admin 中添加上传图片功能

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添加如下设置：

# 指定访问多媒体资源的Url路径，http://127.0.0.1:8000/media/xxx
MEDIA_URL = '/media/'

# 放在django项目根目录的media目录下
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# 因为多媒体目录存放众多上传的文件，我们可以为CKEDITOR设置一个独立的文件夹保存其上传的文件
CKEDITOR_UPLOAD_PATH = 'upload/' 

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

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

# 接受文件上传的url为：http://127.0.0.1:8000/ckeditor/upload/
path('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()

效果图如下:

---

非 admin 使用富文本

我们以上介绍的是配合 admin 站点中使用 ckeditor，如果我们需要在一个非后台管理页面，也就是普通用户使用的页面使用到富文本就需要接下来的知识。

1. 引入 js 文件

可以从官网自行下载文件复制到自己的项目下，也可以直接使用在线的导入；建议使用下载文件的方式。
官网下载地址

<!-- 下载之后是一个文件夹，有很多 js，我们只需要导入如下的 js 文件 -->
<script type="text/javascript" src="ckeditor/ckeditor.js" ></script>

2. 编写显示富文本代码

在页面显示 ckeditor 十分简单

1. 创建 textarea 指定 id
2. 在 js 中将普通 textarea 初始化为富文本编辑器

代码如下：

<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>

<input type="button"  id="btn"/>

<script>
	CKEDITOR.replace('editor1');
</script>

3. 设置支持本地文件上传

前端代码中如果想要本地文件上传，需要后端提供一个专门处理图片上传的后台 url 路径，我们在 django-ckeditor 中已经自带并且我们已经配置过它的 url，现在需要在前端中指定。

找到 ckeditor 中的 config 文件，在其中修改配置如下

CKEDITOR.editorConfig = function( config )
{
	// ...其他配置
	// 配置路径，指向自己服务器的接受图片上传的路径
	config.filebrowserImageUploadUrl = 'http://127.0.0.1:8000/ckeditor/upload/';
};

4. 获取输入内容

当用户点击提交的时候，如果 textarea 在 form 表单中那么会自动的将 textarea 中的 html 源代码跟请求一起发送到 action 指向的目的地。如果为 ajax 的方式提交则需要以下代码获取内容

btn.onclick=function(){
	// 其中的 editor1 字符串为可变部分，为自己创建的 textarea 的标识
	console.log(CKEDITOR.instances.editor1.getData())
}