【Django富文本编辑】Ckeditor的配置、使用和踩坑（应该全）

目录

 

一、基本应用

1.安装

2.配置ckeditor

3.models字段使用，引用步骤2中的ckeditor配置

4.forms字段使用

5.admin后台使用

二、前端应用

1.基本使用中的全部执行完后可以设置前端页面了（没有步骤5也可以）

2.urls路由

3.views配置

4.html页面配置

5.post后台处理数据

三、带图片上传的编辑器

1.安装pillow（所有屠屏功能都需要这个库）

2.添加配置ckeditor

3.urls文件配置

4.修改modes

5.修改forms

 四、踩坑

1.Browse for the image you want, then click ‘Embed Image‘ to continue...

2.ckeditor更换版本会出现的bug，TypeError: render() got an unexpected keyword argument 'renderer'

3.前端图片里没有上传选项

---

一、基本应用

虚拟环境下安装（虚拟环境参考：Python版本控制和虚拟环境_我辈李想的博客-优快云博客）

1.安装

pip install django-ckeditor

2.配置ckeditor

在项目的settings.py文件的INSTALLED_APPS中加上ckeditor

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'ckeditor',#这个
]

在项目的settings.py文件的最下边加上ckeditor配置内容（使用界面上的功能）

#使用ck的工具栏并修改，宽度自适应
CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'300px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 预览、表情
            ['Preview','Smiley'],
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            #格式、字体、大小
            ['Format','Font','FontSize'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['Image', 'NumberedList', 'BulletedList'],
            #居左，居中，居右
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            # 最大化
            ['Maximize']
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet','image2','filebrowser','widget', 'lineutils']),
    },
    #评论
    'comment': {
        # 编辑器宽度自适应
        'width': 'auto',
        'height': '140px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'],
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet']),
    }
}

3.models字段使用，引用步骤2中的ckeditor配置

from ckeditor.fields import RichTextField

class QAmodel(models.Model):
    content = RichTextField(verbose_name='正文内容'，config_name='default')#config_name指定ckeditor配置文件，不指定就使用default

4.forms字段使用

from django import forms
from ckeditor.fields import RichTextFormField

from .models import QAmodel

class Add_questionsForm(forms.ModelForm):

    content = RichTextFormField(label='内容'，config_name='default')

    class Meta:
        model = QAmodel
        fields = ['content',]

5.admin后台使用

我这里后台是xadmin