xadmin集成DjangoUeditor
1、安装
安装DjangoUeditor
1)去GitHub上面下载djangoueditor源码包(https://github.com/twz915/DjangoUeditor3)
然后进入源码的setup.py所在目录,执行pyton setup.py install安装。
2)直接通过pip命令安装
pip install DjangoUeditor
然后将DjangoUeditor放到settings文件的INSTALLED_APPS中
2、配置url
url(r"^ueditor/", include(DjangoUeditor.urls))
3、在model中使用
from DjangoUeditor.models import UEditorField
field = UEditorField(verbose_name = "", width=200, height=300, imagepath="", filepath="", default="", toolbar=[[]])
常用参数说明:
verbose_name:字段显示名
width/height:富文本宽高
imagepath/filepath:图片/文件存储相对路径(相对settings中配置的MEDIA_ROOT)
toolbar:工具栏上的功能按钮,注意这里的toolbar是嵌套的列表
4、准备工作都做好了,接下来需要在xadmin中集成调用,集成方法:
在xadmin--->plugin中新建ueditor.py(名字自定义),内容如下:
import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, 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):
# 识别xadmin中的style_field
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 # 在生成的页面中加入自己的js文件
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)
然后在xadmin--->plugin--->__init__.py文件的PLUGINS中加入我们自定义的插件ueditor

这样就完成了ueditor在xadmin中的集成
最后,在注册modelXadmin的中,加入style_fields={"字段名":"ueditor"}
xadmin集成DjangoUeditor的更多相关文章
- django xadmin 集成DjangoUeditor富文本编辑器
本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...
- xadmin集成DjangoUeditor,以及编辑器的视频路径配置
稍微讲一下DjangoUeditor的配置,因为之前去找配置的时候东拼西凑的,所以自己写一下自己一步步配置的过程.首先我是再github上去下载下来,因为是当作第三方插件集成到xadmin中,所以不用 ...
- 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框
第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...
- Django xadmin引入DjangoUeditor
Django xadmin引入DjangoUeditor 版本:python3.6.1,Django1.11.1 DjangoUeditor下载地址:https://github.com/twz915 ...
- xadmin集成ueditor
from DjangoUeditor.models import UEditorField content = UEditorField(u"内容", imagePath=&quo ...
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
- Django使用xadmin集成富文本编辑器Ueditor(方法二)
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- xadmin快速搭建后台管理系统
一.xadmin的特点: 1.基于Bootstrap3:Xadmin使用Bootstrap3.0框架精心打造.基于Bootstrap3,Xadmin天生就支持在多种屏幕上无缝浏览,并完全支持Boots ...
随机推荐
- mac date命令详解
Mac下的date命令是BSD(Berkeley Software Distribution)系的,Linux下date命令是GNU(GNU's Not Unix)系,二者用法有一些区别. BSD并不 ...
- Using IntelliJ IDEA as the Vim Editor
转载自https://www.jetbrains.com/help/idea/using-intellij-idea-as-the-vim-editor.html This feature is on ...
- shell编程-函数(九)
每种语言都有自己的函数,shell也不例外.支持函数,它可以将脚本程序划分成一个个相对独立的代码块,使代码的模块化,结构更加清晰,并有效地减少程序的代码量,提高代码的复用率. 函数格式 functio ...
- 老K漫谈区块链的共识(3)——分布式系统和区块链共识
1. 啥是分布式系统 当我们评价一个新的事物或者介绍一个新的技术的时候,我们不能架空历史和环境,新的事物不可能脱离历史和环境凭空诞生.任何新的事物和新的技术总是或多或少的,与旧的事件以及过去的技术有所 ...
- c/c++ 模板与STL小例子系列<二> 模板类与友元函数
c/c++ 模板与STL小例子系列 模板类与友元函数 比如某个类是个模板类D,有个需求是需要重载D的operator<<函数,这时就需要用到友元. 实现这样的友元需要3个必要步骤 1,在模 ...
- 我在 Mac 上都用什么
我在 Mac 上都用什么 Homebrew Homebrew 是统一管理 macOS 中应用的最佳方法之一,而且大量优秀的应用都可以在 Homebrew 中找到. 就不做过多介绍了, 有兴趣可以看相关 ...
- eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(二)
eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(二) 接上篇博客,本篇博客主要包含两个内容: 4.使用Android studio创建webservice客 ...
- [福大软工] Z班 团队作业——系统设计 作业成绩
团队作业--系统设计 作业链接 http://www.cnblogs.com/easteast/p/7709763.html 作业情况 这次作业大家完成度都很高,大家的团队分工,任务布置都安排得很到位 ...
- JavaScript函数式编程
一段糟糕透顶的海鸥seagulls程序 鸟群合并conjoin则变成了一个更大的鸟群,繁殖breed则增加了鸟群的数量,增加的数量就是它们繁殖出来的海鸥的数量 //Flock 群 var ...
- Java-Socket实现文件的断点续传
前段时间因为任务需要本人这个java渣渣开始研究如何用java实现简单的文件断点续传.所谓的文件断点续传,我的理解是文件在传输过程中因为某些原因程序停止运行文件终止传输,下一次重新传输文件的时候还能从 ...