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. javascript-文件File转换成base64格式

    不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...

  2. MarkDown排版测试

    1.标题设置 标题(大标题) 标题(小标题) 标题(一级标题) 标题( 二级标题) 标题(三级标题) 标题(四级标题) 备注:大标题与一级标题一样,小标题与二级标题一样,"#"前无 ...

  3. python学习07列表

    '''列表''''''列表:是可变的序列,也是一种可以存储各种数据类型的集合 用[]中括号表示列表的开始和结束:元素之间用,逗号隔开 '''l1=[] #空列表print(len(l1))l2=[&q ...

  4. DiskPart.exe and managing Virtual Hard Disks (VHDs) in Windows 7

    coreygoOctober 7, 2009 In Windows 7, new commands have been added in DiskPart to allow for the creat ...

  5. Spring Boot JPA的查询语句

    文章目录 准备工作 Containing, Contains, IsContaining 和 Like StartsWith EndsWith 大小写不敏感 Not @Query Spring Boo ...

  6. CSS样式3

    1.positon:fixed 可以实现网页浏览器上的返回顶部的功能. positon:fixed 表示将当前div块固定在页面的某一个位置(默认为左上角). <!DOCTYPE html> ...

  7. mac OS git关联github

    正在更新 mac OS 默认安装了git  git -v 查看版本 mac OS 默认安装了ssh  ssh -v 查看版本 1.设置username和email(github每次commit都会记录 ...

  8. 第 43 章 Baidu Map

    43.1. BMap.Circle var point = new BMap.Point(22.111, 114.111); var styleCircleF = { strokeColor:&quo ...

  9. java中for循环和while循环，哪个更快？--一道面试题

    for的 while的

  10. Xapian实战（一）：环境搭建 + 简介

    1. 参考资料 http://xapian.org/docs/install.html Xapian的存储系统.性能以及检索模型等 2. 安装 1) xapian # ./configure --pr ...