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. 如何在 Inno Setup 中执行命令行的命令

    Pascal Scripting: Exec Prototype: function Exec(const Filename, Params, WorkingDir: String; const Sh ...

  2. 霍夫变换(Hough Transform)

    霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.最基本的霍夫变换是从黑白图像中检测直线(线段). 我们先看这样一个问题: 设已知一黑白图像上画了一条直线,要求出这 ...

  3. 标准库 xml

    xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...

  4. 第三方库 正则表达式re模块

    正则表通常被用来检索.替换那些符合某个模式(规则)的文本. 正则表达式通常缩写成“regex”,单数有regexp.regex,复数有regexps.regexes.regexen. 正则表达式是对字 ...

  5. I/O多路复用之select,poll,epoll简介

    一.select 1.起源 select最早于1983年出现在4.2BSD中(BSD是早期的UNIX版本的分支). 它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回 ...

  6. MongoDB学习（四）：通过Java使用MongoDB

    环境配置 在Java项目中使用MongoDB,需要在项目中引入mongo.jar这个包.下载地址:下载 请尽量下载较新的版本,本文用的是2.10.1. 连接MongoDB public synchro ...

  7. JS的String()、toString()、valueOf()的一些隐秘特性

    toString()方法 要把一个值转换为一个字符串,最常用的就是,使用几乎每个值都有的toString()方法,这个方法唯一要做的就是返回相应值的字符串表现. 数值.布尔值.对象和字符串值(没错,每 ...

  8. [故障解决]图文:windows apache无法启用 端口被占用

    windows apache无法启用 端口被占用 1 XAMPP Error: Apache shutdown unexpectedly 无法启动apache,显示的log为: 2 查了一下端口, 通 ...

  9. session与cookie的浅谈

    cookie的用途: 当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为你浏览某个网页的时候,WEB 服务 ...

  10. 24-Java-Spring框架(二)

    Spring框架的了解.SpringIOC的部分内容请阅读23-Java-Spring框架(二) 三.Spring Web MVC(Model View Controller) 1.SpringMVC ...