Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是DjangoUeditor编辑器。现把使用方法整理出来供大家开发时参考:

1、下载Ueditor,最后版本:1.4.3.3

UEditor - 下载​ueditor.baidu.com

任意下载一个版本,如:PHP版,解压后,放在Django目录下。

本项目放在static/plugs/目录

2、安装DjangoUeditor

在线安装版本比较旧,不支持Python 3。从GitHub下载支持python3的DjangoUeditor3:

https://github.com/twz915/DjangoUeditor3/​github.com

然后离线安装,执行python setup.py install 安装。

3、配置DjangoUeditor

(1)、settings.py中的配置

InstallED_APPS中注册

在settings.py 最后添加设置及文件上传路径

UEDITOR_SETTINGS = {
"toolbars": { #定义多个工具栏显示的按钮,允行定义多个
"name1": [['source', '|', 'bold', 'italic', 'underline']],
"name2": []
},
"images_upload":{
"allow_type":"jpg,png,gif", #定义允许的上传的图片类型
"max_size":"10222kb" #定义允许上传的图片大小,0代表不限制
},
"files_upload":{
"allow_type":"zip,rar,pdf,docx,doc,xls,xlsx,ppt,pptx,mp4,flv,swf", #定义允许的上传的文件类型
"max_size":"102222kb" #定义允许上传的文件大小,0代表不限制
},
"image_manager": {
"location": "" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样
}
}
# DjangoEditor上传目录配置
MEDIA_URL='/static/ueupload/'
MEDIA_ROOT='./ExamWeb/static/ueupload/'

(2)、urls.py 中添加路由

url(r'^ueditor/', include('DjangoUeditor.urls'))

4、models.py中引入UEditorField并绑定

from DjangoUeditor.models import UEditorField

把需要使用富文本框的字段类型修改为UEditorField,此类型继承了TextField

5、模板页面使用

(1)、引入JS脚本

<script src="{% static '/plugs/ueditor/ueditor.config.js'%}"></script>
<script src="{% static '/plugs/ueditor/ueditor.all.min.js'%}"></script>

(2)、绑定富文本框

<script>var ue = UE.getEditor('qcontent',{
'initialFrameWidth':1000,
'initialFrameHeight':150,
'serverUrl': "/ueditor/controller/?imagePathFormat=images/&filePathFormat=files/"
});
</script>

注意目录要带&amp;amp;amp;quot;/&amp;amp;amp;quot;

提示:settings.py 中关于上传路径的配置一定要注意,曾在这里浪费很多时间,无法正常上传。注意MEDIA_ROOT的设置,在服务器中目录的配置会有问题,用BASE_DIR来设置APP目录,否则在Aapache下上传目录会建到C盘或Aapache目录。

MEDIA_URL='/static/ueupload/'

MEDIA_ROOT=BASE_DIR+'/static/ueupload/'

配置成功界面

ueditor 不显示工具栏_Python 之Django富文本框Ueditor的使用相关推荐

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  2. Django下富文本编辑器Ueditor的配置和使用

    1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...

  3. django(7)modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...

  4. themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传

    项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...

  5. 百度富文本编辑器ueditor在https协议下无法正常插入动态地图

    在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...

  6. 微信公众平台使用的富文本编辑器(ueditor)

    2019独角兽企业重金招聘Python工程师标准>>> 微信公众平台UEditor 微信公众平台所使用的富文本编辑器也是ueditor,只是微信在上面做了一些样式修改和功能扩展,微信 ...

  7. 【Django 027】tinymce富文本框使用详解

    针对博客和论坛类网站,用户需要在网页的富文本框中输入内容传递到后端.那么Django项目如何生成一个包含富文本框的页码,又如何获取用户上传的富文本内容呢?这一节我们就一起来看看. 我是T型人小付,一位 ...

  8. vue项目+富文本编辑器ueditor - 资源篇

    资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址 说明: 支持 vue-cli 2.x 支持 ...

  9. 解决百度富文本框中添加的表格页面获取后不显示表格边框的问题

    在百度富文本框添加表格后可以右击设置表格边框是否可见,设为可见就可以显示了 转载于:https://www.cnblogs.com/missguolf/p/9076535.html

最新文章

  1. 人脸识别进校园引争议 “人工智能+教育”应审慎
  2. 解决ubuntu系统安装完后启动项里没有ubuntu的问题
  3. mysql二级制包安装 for RedHat Linux Enterprise6.4
  4. ASP.NET程序中常用的三十三种代码
  5. linux install用法
  6. c#分页_使用Kotlin搭配Springboot开发RESTFul接口(二)自定义配置、跨域、分页
  7. 他们曾是别人眼中的笑话,最后却都成了神话
  8. python日志处理三方工具loguru与常用场景快捷配置
  9. R语言模拟:Cross Validation
  10. 单位dB和dBm的区别
  11. 访问ftp服务器网页,访问ftp服务器是网页
  12. Spring IOC解析
  13. Python - 如何用turtle库画一个微笑表情包
  14. 如何从 Ubuntu 20.04 LTS 升级到 Ubuntu 22.04 “Jammy Jellyfish”|Linux 中国
  15. 投身开源,需要持之以恒的热爱与贡献 —— Apache Spark Committer 姜逸坤
  16. new Date() 和实际时间差8小时的问题
  17. 清风数学建模——插值算法
  18. Openwrt+WR703N 折腾笔记
  19. CRUX下实现进程隐藏(2)
  20. 高性能可扩展分布式RPC框架Dubbo-内核原理揭秘

热门文章

  1. Python之Requests
  2. 【Vue.js】vue用户登录功能
  3. python文件读写用到的库是什么_Python中的文件读写-理论知识
  4. 基于 SpringBoot2 + MybatisPlus 的商城管理系统(附源码)
  5. 一款小清新的 SpringBoot+ Mybatis 前后端分离后台管理系统项目
  6. java基础(五) String性质深入解析
  7. 2021-10-20 哈希表 恋上数据结构笔记
  8. 闰年的判断方法_C语言100题 判断这一天是一年中的第几天 壁纸 火影
  9. 原来以为(Trie)字典树很难,后来发现不久这么一回事嘛
  10. 排序算法 | 直接选择排序,算法的图解、实现、复杂度和稳定性分析