django中ckeditor富文本编辑器使用

1.安装模块

　　（pillow是python的一个图像处理库）

　　pip install django-ckeditor

　　pip install pillow

2.编辑seetings.py配置文件　

INSTALLED_APPS = [
   \'ckeditor\',#富文本编辑器
    \'ckeditor_uploader\'#富文本编辑器上传图片模块
]

#媒体文件配置
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "images"  # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写  \' \' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。


# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    #（1）默认配置
    # \'default\': {
    #     \'toolbar\': \'full\',  # 工具条功能
    #     \'height\': 300,  # 编辑器高度
    #     \'width\': 800,  # 编辑器宽
    # },

    #（3）自定义配置带代码块显示
    \'default\': {
        \'toolbar\': (
            [\'div\', \'Source\', \'-\', \'Save\', \'NewPage\', \'Preview\', \'-\', \'Templates\'],
            [\'Cut\', \'Copy\', \'Paste\', \'PasteText\', \'PasteFromWord\', \'-\', \'Print\', \'SpellChecker\', \'Scayt\'],
            [\'Undo\', \'Redo\', \'-\', \'Find\', \'Replace\', \'-\', \'SelectAll\', \'RemoveFormat\'],
            [\'Form\', \'Checkbox\', \'Radio\', \'TextField\', \'Textarea\', \'Select\', \'Button\', \'ImageButton\', \'HiddenField\'],
            [\'Bold\', \'Italic\', \'Underline\', \'Strike\', \'-\', \'Subscript\', \'Superscript\'],
            [\'NumberedList\', \'BulletedList\', \'-\', \'Outdent\', \'Indent\', \'Blockquote\'],
            [\'JustifyLeft\', \'JustifyCenter\', \'JustifyRight\', \'JustifyBlock\'],
            [\'Link\', \'Unlink\', \'Anchor\'],
            [\'Image\', \'Flash\', \'Table\', \'HorizontalRule\', \'Smiley\', \'SpecialChar\', \'PageBreak\'],
            [\'Styles\', \'Format\', \'Font\', \'FontSize\'],
            [\'TextColor\', \'BGColor\'],
            [\'Maximize\', \'ShowBlocks\', \'-\', \'About\', \'pbckcode\'],
            [\'Blockquote\', \'CodeSnippet\'],
        ),
        \'width\': \'auto\',
        # 添加按钮在这里
        \'toolbar_Custom\': [
            [\'NumberedList\', \'BulletedList\'],
            [\'Blockquote\', \'CodeSnippet\'],
        ],
        # 插件
        \'extraPlugins\': \',\'.join([\'codesnippet\', \'widget\', \'lineutils\', ]),
    },
}

seetings.py

3.编辑urls.py路由

from django.conf.urls import url, include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
from editer import views

urlpatterns = [
                  url(r\'^admin/\', admin.site.urls),
                  url(r\'^ckeditor/\', include(\'ckeditor_uploader.urls\')),
                  url(r\'^index/\', views.index),#测试获取后台编辑的内容用的

              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  ## 没有这一句无法显示上传的图片

urls.py

4.app应用的models.py中的应用　　

from django.db import models
from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField


class SPUModel(models.Model):
    \'\'\'这是spu表格\'\'\'
    name = models.CharField(max_length=32, verbose_name=\'商品名\')
    sales = models.CharField(max_length=20, verbose_name=\'销售量\')
    desc_pack = RichTextUploadingField(default=\'\', verbose_name=\'商品详情\')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = \'商品表\'
        db_table = verbose_name
        verbose_name_plural = verbose_name

models.py

5.数据库迁移指令

　　makemigrations

　　migrate

6.创建admin超级用户

　　createsuperuser

7.app应用的admin.py文件中注册表　　

from django.contrib import admin
from editer import models

# Register your models here.
admin.site.register(models.SPUModel)

admin.py

8.启动项目，进入admin后台管理编辑即可

9.在templates文件夹中编写测试url返回页面index.html　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditorTest</title>
</head>
<body>
<div>
    {% for obj in all %}
        <hr>
        <h2>第{{ forloop.counter }}篇：</h2>
        <h2>标题：{{ obj.name }}</h2>
        <h3>销量：{{ obj.sales }}</h3>
        {{ obj.desc_pack | safe }}

    {% endfor %}

</div>
</body>
</html>

index.html

10.app应用的views.py文件中编写测试url对应的视图函数　　

from django.shortcuts import render
from editer import models


# Create your views here.
def index(request):
    all_obj = list(models.SPUModel.objects.all().all().values(\'name\',\'sales\',\'desc_pack\'))

    return render(request, \'index.html\', {\'all\': all_obj})

views.py

11.重启项目，浏览器测试http://127.0.0.1:8000/index/

参考博客：https://blog.csdn.net/weixin_43158056/article/details/93911844