在运营后台,运营⼈员需要录⼊商品并编辑商品的详情信息,⽽商品的详情信息不是普通的⽂本,

可以是包含了HTML语法格式的字符串。为了快速简单的让⽤户能够在⻚⾯中编辑带格式的⽂本,我们引⼊富⽂本编辑器。富⽂本即具备丰富样式格式的⽂本。

我们使⽤功能强⼤的CKEditor富⽂本编辑器。

1. 安装

pip install django-ckeditor 

2. 添加应⽤

在INSTALLED_APPS中添加
INSTALLED_APPS = [
...
'ckeditor', # 富⽂本编辑器
'ckeditor_uploader', # 富⽂本编辑器上传图⽚模块
...
]

3. 添加CKEditor设置
在settings/dev.py中添加

CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full', # ⼯具条功能
'height': 300, # 编辑器⾼度
# 'width': 300, # 编辑器宽
},
}
CKEDITOR_UPLOAD_PATH = ''

4. 添加ckeditor路由
在总路由中添加

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

5. 为模型类添加字段
ckeditor提供了两种类型的Django模型类字段

• ckeditor.fields.RichTextField 不⽀持上传⽂件的富⽂本字段

• ckeditor_uploader.fields.RichTextUploadingField ⽀持上传⽂件的富⽂本字段

用法:

desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
desc_pack = RichTextField(default='', verbose_name='包装信息')

CKEditor富⽂本编辑器的更多相关文章

  1. CKEditor富文本编辑器

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

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

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

  3. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

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

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

  5. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  6. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. ckeditor富文本编辑器的基本配置设置:

    原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...

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

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

  9. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

随机推荐

  1. 转:Python正则表达式指南

    本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...

  2. java自己写的简单聊天工具SimpleQQ感悟

    Demo如下: 客户端: /* * 一个简单的QQ * 2013-8-1 * @李志杰 */ package SimpleQQ_Client; import java.awt.*; import ja ...

  3. 优化深度神经网络(三)Batch Normalization

    Coursera吴恩达<优化深度神经网络>课程笔记(3)-- 超参数调试.Batch正则化和编程框架 1. Tuning Process 深度神经网络需要调试的超参数(Hyperparam ...

  4. VMware虚拟机安装Centos7详细步骤过程(图文)[转载]

    Centos7官网下载地址:https://www.centos.org/download/ 图文安装步骤转载地址: https://www.jianshu.com/p/ce08cdbc4ddb?ut ...

  5. 微信公众平台PHP示例一

    <?php /** * Created by PhpStorm. * User: Administrator * Date: 2015-12-18 * Time: 21:51 */ define ...

  6. 有关DNS

    单位的域控制器和下面客户端的连接一直有问题,时常会找不到服务器连接: 错误基本显示为:没有可以登录的服务器 无法连接seed.com域 后来发现,是DNS解析的问题,单位使用了外部解析地址202.96 ...

  7. pandas中DataFrame相关

    1.创建 1.1  标准格式创建 DataFrame创建方法有很多,常用基本格式是:DataFrame 构造器参数:DataFrame(data=[],index=[],coloumns=[]) In ...

  8. 斐波那契数列,跳台阶(dp思想)

    一 . 斐波那契数列:1,1,2,3,5,8,13,21 即后一项是前两项的和. class Solution { private: ]; public: Solution() { memset(ar ...

  9. UnityGUI Keynote

    [UnityGUI Keynote] 1.GUI.Label控件可以用来显示texture: 更通用的作法是用label来显式texture. 2.GUI.Button可以显示texture.stri ...

  10. ASP.NET MVC 和 WebForm的权限控制

    今天主要讲一下对于ASP.NET的页面级权限控制 数据结构:用户表.角色表.权限表.角色权限派生表 为用户添加权限的数据配置后, 自定义类对MVC继承Controller 对其内置方法Initiali ...