Python ckeditor富文本编辑器代码实例解析

1.安装第三方模块包

pip install django-ckeditor

2.添加应用

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

3. 添加CKEditor设置

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
  'default': {
    'toolbar': 'full', # 工具条功能
    'height': 300,   # 编辑器高度
    # 'width': 300,   # 编辑器宽
  },
}
CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径，留空则调用django的文件上传功能

4. 添加ckeditor路由

在总路由中添加

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

5. 为模型类添加字段

ckeditor提供了两种类型的Django模型类字段

  • - `ckeditor.fields.RichTextField` 不支持上传文件的富文本字段
  • - `ckeditor_uploader.fields.RichTextUploadingField` 支持上传文件的富文本字段\

6.修改course/models.py里面的字段信息,记得要重新数据迁移

from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
  """
  专题课程
  """
  ...
　　# 使用这个字段的原因
　　# brief = models.TextField(verbose_name="详情介绍", null=True, blank=True)
　　brief = RichTextUploadingField(verbose_name="详情介绍", null=True, blank=True)
#使用富文本编辑提供的内容

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Python的Flask框架中集成CKeditor富文本编辑器的教程

    CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特点.它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor. 下载CKeditor 访问CKeditor官方网站,进入下载页面,选择Standard Package(一般情况下功能足够用了),然后点击Download CKEditor按钮下载ZIP格式的安装文件.如果你想尝试更多的功能,可以选择下载Full

  • python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例

    PyQt5多行文本框控件QTextEdit简介 QTextEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML文档 QTextEdit类中常用的方法 方法 描述 setPlainText() 设置多行文本框的内容 toPlainText() 返回多行文本框的文本内容 setHtml() 设置多行文本框的文本内容为HTML文档,HTML文档是描述网页的 toHtml() 返回多行文

  • Python通过文本和图片生成词云图

    使用现有的txt文本和图片,就可以用wordcloud包生成词云图.大致步骤是: 1.读取txt文本并简单处理: 2.读取图片,以用作背景: 3.生成词云对象,保存为文件. 需要用到3个库:jieba(用于分割文本为词语).imageio(用于读取图片).wordcloud(功能核心,用于生成词云). 我用简历和我的照片,生成了一个词云图: 代码如下: import jieba import imageio import wordcloud # 读取txt文本 with open('resume

  • python tkinter之 复选、文本、下拉的实现

    我就废话不多说了,直接看代码吧! import tkinter as tk from tkinter import ttk win = tk.Tk() win.title("Python GUI") # 添加标题 ttk.Label(win, text="Chooes a number").grid(column=1, row=0) # 添加一个标签0 ttk.Label(win, text="Enter a name:").grid(colum

  • Python统计文本词汇出现次数的实例代码

    问题描述 有时在遇到一个文本需要统计文本内词汇的次数 的时候 ,可以用一个简单的python程序来实现. 解决方案 首先需要的是一个文本文件(.txt)格式(文本内词汇以空格分隔),因为需要的是一个程序,所以要考虑如何将文件打开而不是采用复制粘贴的方式.这时就要用到open()的方式来打开文档,然后通过read()读取其中内容,再将词汇作为key,出现次数作为values存入字典. 图 1 txt文件内容 再通过open和read函数来读取文件: open_file=open("text.txt

  • python3+openCV 获取图片中文本区域的最小外接矩形实例

    我就废话不多说了,大家还是直接看代码吧! print("thresh =",thresh) coords = np.column_stack(np.where(thresh > 0))//获取thresh二值灰度图片中的白色文字区域的点 print("coords =",coords) min_rect = cv2.minAreaRect(coords)//由点集获取最小矩形(包含中心坐标点.宽和高.偏转角度) print("min_rec =&qu

  • python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例

    PyQt5单行文本框控件QLineEdit介绍 QLineEdit类是一个单行文本框控件,可以输入单行字符串. QLineEdit类中常用的方法如下表 方法 描述 setAlignment() 按固定值方式对齐文本 Qt.AlignLeft:水平方向靠左对齐 Qt.AlignRight:水平方向靠右对齐 Qt.AlignCenter:水平方向居中对齐 Qt.AlignJustify:水平方向调整间距两端对齐 Qt.AlignTop:垂直方向靠上对齐 Qt.AlignBottom:垂直方向靠下对齐

  • Python3自动生成MySQL数据字典的markdown文本的实现

    为啥要写这个脚本 五一前的准备下班的时候,看到同事为了做数据库的某个表的数据字典,在做一个复杂的人工操作,就是一个字段一个字段的纯手撸,那速度可想而知是多么的折磨和锻炼人的意志和耐心,反正就是很耗时又费力的活,关键是工作效率太低了,于是就网上查了一下,能否有在线工具可用,但是并没有找到理想和如意的,于是吧,就干脆自己撸一个,一劳永逸,说干就干的那种-- 先屡一下脚本思路 第一步:输入或修改数据库连接配置信息,以及输入数据表名 第二步:利用pymysql模块连接数据库,并判断数据表是否存在 第三步

  • Python ckeditor富文本编辑器代码实例解析

    1.安装第三方模块包 pip install django-ckeditor 2.添加应用 INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] 3. 添加CKEditor设置 # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度

  • CKeditor富文本编辑器使用技巧之添加自定义插件的方法

    本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中如下: dialogs中如下: 我们先来看plugins.js文件的内容: (function() { CKEDITOR.plugins.add("qchoice", { requires: ["dialog"], init:

  • 浅析Yii2集成富文本编辑器redactor实例教程

    在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Redactor比百度编辑器好用哦 Redactor有官方的Yii2插件package,实用性也是很强的. 首先我们不急不躁,先进行安装Redactor. 可以参考https://github.com/yiidoc/yii2-redactor进行安装.有很多新手看不惯英文哈,如果你点击了链接参考了gith

  • Vue.js结合Ueditor富文本编辑器的实例代码

    Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • nodejs后台集成ueditor富文本编辑器的实例

    nodejs后台集成ueditor富文本编辑器的实例

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块 5 项目根目录下创建 ue.js 代码部分来自于

  • Python %r和%s区别代码实例解析

    %r用rper()方法处理对象 %s用str()方法处理对象 相同结果 有些情况下,两者处理的结果是一样的,比如说处理int型对象. 例: print('I am %s years old.' % 22) print('I am %r years old.' % 22) 返回结果: I am 22 years old. I am 22 years old. 不同结果 例: x = "There are %d types of people." % 10 print('I said: %

  • Python Opencv轮廓常用操作代码实例解析

    1.颜色空间转换 使用cv2.cvtColor(input_image ,flag),flag为转换类型 常用的转换类型有: BGR和灰度图的转换使用 cv2.COLOR_BGR2GRAY BGR和HSV的转换使用 cv2.COLOR_BGR2HSV img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) 2.二值化 ret, dst = cv2.threshold(src, thresh, maxval, type) src:表示的是图片源(灰度图)

  • vue中使用ueditor富文本编辑器

    最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <

  • Vue2.0中集成UEditor富文本编辑器的方法

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载

随机推荐