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

django中ckeditor富文本编辑器使用的更多相关文章

  1. Django中CKEditor富文本编译器的使用

    CKEditor富文本编辑器 1. 安装 pip install django-ckeditor 2. 添加应用 在INSTALLED_APPS中添加 INSTALLED_APPS = [ ... ' ...

  2. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  3. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

  4. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

  5. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  6. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  7. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  8. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  9. web项目中nicedit富文本编辑器的使用

    web项目中nicedit富文本编辑器的使用 一.为什么要用富文本编辑器? 先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而做不到其他的文本调整功能,甚 ...

随机推荐

  1. Oracle数据库字段保留3位小数，程序读出来显示4位小数

    需求 项目需求从字段2位小数,改成3位小数,这事儿好办,数据库噼里啪啦敲了一行代码,发现居然报错,原因是不能修改字段精度问题,然后使用了冒泡排序,搞定 --新增临时字段 ,); --将原字段内容拷贝至 ...

  2. Java5-7作业总结（第八次作业）19201421-吴志越

    前言:关于此次三次作业,相比于前3次难度着实高了一个档次,第五次作业,虽然对于工具类没有很高.但是第一题的复杂程度很高,对于正则表达式有很高的要求,需要使用很多正则表达式的方法,而且不能有一处错误,对 ...

  3. JavaScript Array every()&some()&reduce()方法

    every()方法测试数组的所有元素是否都通过了指定函数的测试. // 每一项都要满足条件才会返回true,只要有一项不满足返回false var arr = [1, 2, 3, 4]; let bl ...

  4. SQL SERVER 性能优化二： 数据库初始值大小及增长方式设置

    数据库增长方式主要有两种,按百分比自动增长和按固定大小自动增长,设置初始大小和增长方式需谨慎. 初始大小就是建库的大小,设小了,容易造成磁盘碎片,频繁增长也会影响IO响应.设大了,也不行,设大了,每次 ...

  5. Codeforces 1323 div2题解ABC

    A. Even Subset Sum Problem 签到题 #include <bits/stdc++.h> using namespace std; template <type ...

  6. 数学--数论--欧拉降幂--P5091 欧拉定理

    题目背景 出题人也想写有趣的题面,可惜并没有能力. 题目描述 给你三个正整数,a,m,ba,m,ba,m,b,你需要求:ab mod ma^b \bmod mabmodm 输入格式 一行三个整数,a, ...

  7. 数学--数论--HDU 1098 Ignatius's puzzle （费马小定理+打表）

    Ignatius's puzzle Problem Description Ignatius is poor at math,he falls across a puzzle problem,so h ...

  8. 洛谷P1771 方程的解

    P1771 方程的解 都知道这个题可以用隔板法做 把这个\(g(x)\)想象为.....\(g(x)\)个苹果? 因为解是正整数,所以给这些"苹果"分组的时候每组最少有一个 然后我 ...

  9. python（简介）

    python发展史: 自从20世纪90年代初Python语言诞生至今,它已被逐渐广泛应用于系统管理任务的处理和Web编程. Python的创始人为荷兰人吉多·范罗苏姆 [3]  (Guido van ...

  10. 最长公共子串(Longest common substring)

    问题描述: 给定两个序列 X=<x1, x2, ..., xm>, Y<y1, y2, ..., yn>,求X和Y长度最长的公共子串.(子串中的字符要求连续) 这道题和最长公共 ...