CKEditor富文本编辑器在Python中的应用

在运营后台，运营人员需要录入商品并编辑商品的详情信息，而商品的详情信息不是普通的文本，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带格式的文本，我们引入富文本编辑器。富文本即具备丰富样式格式的文本。

我们使用功能强大的CKEditor富文本编辑器。


富文本编辑器

1. 安装
pip install django-ckeditor
2. 添加应用
在INSTALLED_APPS中添加

INSTALLED_APPS = [
    ...
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 富文本编辑器上传图片模块
    ...
]
3. 添加CKEditor设置
在settings/dev.py中添加

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 300,  # 编辑器高度
        # 'width': 300,  # 编辑器宽
    },
}
CKEDITOR_UPLOAD_PATH = ''  # 上传图片保存路径，使用了FastDFS，所以此处设为''
4. 添加ckeditor路由
在总路由中添加

url(r'^ckeditor/', include('ckeditor_uploader.urls')),
5. 为模型类添加字段
ckeditor提供了两种类型的Django模型类字段

ckeditor.fields.RichTextField 不支持上传文件的富文本字段
ckeditor_uploader.fields.RichTextUploadingField 支持上传文件的富文本字段
在商品模型类（SPU）中，要保存商品的详细介绍、包装信息、售后服务，这三个字段需要作为富文本字段

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

class Goods(BaseModel):
    """
    商品SPU
    """
    ...
    desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
    desc_pack = RichTextField(default='', verbose_name='包装信息')
    desc_service = RichTextUploadingField(default='', verbose_name='售后服务')
6. 修改Bug
通过Django上传的图片保存到了FastDFS中，而保存在FastDFS中的文件名没有后缀名，ckeditor在处理上传后的文件名按照有后缀名来处理，所以会出现bug错误，


修正方法
找到虚拟环境目录中的ckeditor_uploader/views.py文件，如

~/.virtualenvs/meiduo/lib/python3.5/site-packages/ckeditor_uploader/views.py

将第95行代码修改如下：

扩展：

CKEditor富文本编辑器在Python中的应用，不光只有后端通过admin后端来实现，还可以通过前端来实现具体代码如下：

tinymce. init({

//选择class为content的标签作为编辑器

selector: '#rich_content',

//方向从左到右

directionality: 'ltr',

//语言选择中文

language: 'zh_CN',

//高度为400

height: 300,

width: 570,

//工具栏上面的补丁按钮

plugins: [

'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',

'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',

'save table contextmenu directionality template paste textcolor',

'codesample imageupload',

],

//工具栏的补丁按钮

toolbar: 'insertfile undo redo | \

styleselect | \

bold italic | \

alignleft aligncenter alignright alignjustify | \

bullist numlist outdent indent | \

link image | \

print preview media fullpage | \

forecolor backcolor emoticons | \

codesample fontsizeselect fullscreen | \

imageupload',

//字体大小

fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',

//按tab不换行

nonbreaking_force_tab: true,

imageupload_url: "/user/submit-image"

});

                                                                          谢谢大家支持！