回到顶部

CONTENTS

django admin 使用 ckeditor 富文本编辑器

配置步骤

1. 安装 django-ckeditor 库 

pip install django-ckeditor

pip install pillow (上传图片到伺服器裁剪用,生成浏览伺服器的缩略图)

2. settings.py ( awesome_ckeditor 要与 model 里面的 config_name 一致 )

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

# ckeditor
CKEDITOR_CONFIGS = {
    'awesome_ckeditor': {
        'toolbar': 'full',
    },
}

CKEDITOR_UPLOAD_PATH = 'ckeditor/'  # 他的目录相对与media root 就是 media root + CKEDITOR_UPLOAD_PATH 不能写成"/uploads
CKEDITOR_JQUERY_URL = '//cdn.bootcss.com/jquery/1.11.3/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = 'pillow'

3. models.py

# from ckeditor.fields import RichTextField  # 不包含上传文件
from ckeditor_uploader.fields import RichTextUploadingField  # 包含上传文件

class Article(models.Model):
    content = RichTextUploadingField(verbose_name="内容", config_name='awesome_ckeditor')

4. urls.py (项目的 urls)

from django.conf.urls import url, include

urlpatterns = [
                  url(r'^ckeditor/', include('ckeditor_uploader.urls')),
              ]

5. 效果图

其他文档

1. ckeditor 配置参数文档:https://blog.csdn.net/qq_38504396/article/details/79835475

2. 前端代码高亮文档:

配置总结

1. 要写出能带 pre 标签的代码块(使用富文本编辑器都是可以做到的)

2. 在前端渲染带 pre 标签的代码块(可以选择自己喜欢的第三方插件渲染)

^_^
请喝咖啡 ×

前一篇: uwsgi 配置 python virtualenv 虚拟环境目录 ( ini 配置)
下一篇: ckeditor 代码前端高亮