django配置Ueditor富文本编辑器
1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录
2.找到项目的settings文件,注册app
3.找到项目urls文件,配置DjangoUeditor路由
4.找到app下的models,在需要使用富文本框的字段使用UEditorField,相关参数含义可参考文档:https://github.com/zhangfisher/DjangoUeditor
[python] view plain copy
- from DjangoUeditor.models import UEditorField
[python] view plain copy
- content=UEditorField(verbose_name='博客内容',
- width=700,
- height=400,
- toolbars='full',
- imagePath='ueditor/images/',
- filePath='ueditor/files/',
- upload_settings={'imageMaxSizing':1024000},
- default='')
5.xadmin中添加插件ueditor
由于已经将xadmin源文件拷贝到了项目下,为extra_apps/xadmin,在xadmin下的plugin中新建一个ueditor.py文件,添加以下代码:
[python] view plain copy
- import xadmin
- from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
- from DjangoUeditor.models import UEditorField
- from DjangoUeditor.widgets import UEditorWidget
- from django.conf import settings
- class XadminUEditorWidget(UEditorWidget):
- def __init__(self,**kwargs):
- self.ueditor_options=kwargs
- self.Media.js = None
- super(XadminUEditorWidget,self).__init__(kwargs)
- class UeditorPlugin(BaseAdminPlugin):
- def get_field_style(self, attrs, db_field, style, **kwargs):
- if style == 'ueditor':
- if isinstance(db_field, UEditorField):
- widget = db_field.formfield().widget
- param = {}
- param.update(widget.ueditor_settings)
- param.update(widget.attrs)
- return {'widget': XadminUEditorWidget(**param)}
- return attrs
- def block_extrahead(self, context, nodes):
- js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js") #自己的静态目录
- js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js") #自己的静态目录
- nodes.append(js)
- xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
- xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
6.将ueditor插件添加到plugins中的__init__.py的PLUGINS中
7.找到app下的adminx.py文件,配置插件
在页面上要取消转义
8.配置上传文件的加载路径
1.在settings里面配置
[python] view plain copy
- MEDIA_URL='/media/'
- MEDIA_ROOT=os.path.join(BASE_DIR,'media')
[python] view plain copy
- 在settings里面配置
- from django.views.static import serve
- 在urls里面配置
- url(r'^media/(?P<path>.*)$',serve,{"document_root":settings.MEDIA_ROOT},name='media')
django配置Ueditor富文本编辑器的更多相关文章
- python3 Django集成Ueditor富文本编辑器
1.下载 python3: https://github.com/twz915/DjangoUeditor3/ (直接下载zip) 2.解压,解压打开后找到DjangoUeditor将DjangoUe ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
- UEditor富文本编辑器简单使用
UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
随机推荐
- UI基础一:简单的BOL查询
利用标准的BOL编辑工具,添加BOL对象,重写查询方法,实现简答的BOL查询 1.SE11创建查询对象结构: 2.SE11创建查询结果对象: 3.SE24新建处理类: 重写查询结果方法: METHOD ...
- Linux在shell中输入历史命令
在Linux的shell中,经常输入的命令有很多雷同,甚至是一样的, 如果是长命令,再次敲一遍效率真的是很低, 不过可以通过Ctl+r, 查找history中以前输入的命令,很是好用. 按Ctrl+ ...
- HTML5 <li> <ol> <ul> 用法
定义和用法 <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中. HTML 与 XHTML 之间的差 ...
- Git中的文件上传、修改、撤消修改和删除
1.添加文件.提交文件 1.1在learngit目录下创建一个readme.txt文件,并且输入内容. 1.2添加文件到版本库learngit 1.2.1使用git add 文件告诉Git把文件添加 ...
- 使用JQuery 合并两个 json 对象
一,保存object1和2合并后产生新对象,若2中有与1相同的key,默认2将会覆盖1的值 var object = $.extend({}, object1, object2); 二,将2的值合并到 ...
- 关于TCP长连接和发送心跳的一些理解
原因 TCP是一种有连接的协议,但是这个连接并不是指有一条实际的电路,而是一种虚拟的电路.TCP的建立连接和断开连接都是通过发送数据实现的,也就是我们常说的三次握手.四次挥手.TCP两端保存了一种数据 ...
- linux的典型分支:
1.redhat 2.debian 3.centOS 4.ubuntu 5.fedora 6.kali linux
- 利用awk处理学生成绩问题(难度较大)
学生成绩表单如下: Name,Team,First Test, Second Test, Third Test Tom,Red,,, Joe,Green,,, Maria,Blue,,, Fred,B ...
- sqlalchem表关联(一对多,一对一,多对多)
简介: 一:一对多关系 1.表示一对多的关系时,在子表类中通过 foreign key (外键)限制本列的值,然后,在父表类中通过 relationship() 方法来引用子表的类. 2.示例代码: ...
- RTTI,C++类型转换操作符
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...