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百度地图组件所在 ...
随机推荐
- 微信小程序 带参调用后台接口 循环渲染页面 wx.request wx:for
test.js 文件里的onLoad function getarticles(p,order,mythis) { wx.request({ url: 'https://ganggouo.cn/ind ...
- vuex的学习例子
最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...
- 解决eclipse/myeclipse导入项目时出现红色叹号的方法
- frameset的固定放置模式,不能放入<form runat="server">中
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="admin_default.as ...
- inode占用100%时硬盘无法写入文件故障处理
故障现象: 分区无法写入文件. 故障分析: 执行df -h命令发现空间占用不到50%,执行df -hi,发现某分区IUse%值为99%,说明innode已经用完,应该是某些目录下存在大量的小文件导致. ...
- linux-xshell同时向多台服务器一起发命令
概述:有时候我们要往多台linux服务器上面步东西,一台一台布能烦死我们.如果能同时向多台服务器发命令岂不美哉. 开工: 首先打开exshell,查看->撰写栏 打开 然后瓷砖排序,看起来方便 ...
- CSS(三)--自定义标签
HTML代码 <body> <ul> <li>1</li> <li>2</li> </ul> </body&g ...
- gensim做主题模型
作为Python的一个库,gensim给了文本主题模型足够的方便,像他自己的介绍一样,topic modelling for humans 具体的tutorial可以参看他的官方网页,当然是全英文的, ...
- c#7的新特性
1.out关键字 //可以直接声明使用 ",out int number); 2.元组 //有点类似匿名对象的样子 //用小括号包含变量,可以当做返回值,可以当做变量赋值等 //1.当做函数 ...
- vue-router-2-动态路由配置
const User = { template: '<div>User{{ $route.params.id }}</div>' } const router = new Vu ...