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的更多相关文章

  1. django xadmin 集成DjangoUeditor富文本编辑器

    本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...

  2. xadmin集成DjangoUeditor,以及编辑器的视频路径配置

    稍微讲一下DjangoUeditor的配置,因为之前去找配置的时候东拼西凑的,所以自己写一下自己一步步配置的过程.首先我是再github上去下载下来,因为是当作第三方插件集成到xadmin中,所以不用 ...

  3. 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

    第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...

  4. Django xadmin引入DjangoUeditor

    Django xadmin引入DjangoUeditor 版本:python3.6.1,Django1.11.1 DjangoUeditor下载地址:https://github.com/twz915 ...

  5. xadmin集成ueditor

    from DjangoUeditor.models import UEditorField content = UEditorField(u"内容", imagePath=&quo ...

  6. Xadmin集成富文本编辑器ueditor

    在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...

  7. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

  8. Django使用xadmin集成富文本编辑器Ueditor(方法二)

    一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...

  9. xadmin快速搭建后台管理系统

    一.xadmin的特点: 1.基于Bootstrap3:Xadmin使用Bootstrap3.0框架精心打造.基于Bootstrap3,Xadmin天生就支持在多种屏幕上无缝浏览,并完全支持Boots ...

随机推荐

  1. EOS智能合约开发(二):EOS创建和管理钱包

    上节介绍了EOS智能合约开发之EOS环境搭建及启动节点 那么,节点启动后我们要做的第一件事儿是什么呢?就是我们首先要有账号,但是有账号的前提是什么呢?倒不是先创建账号,而是先要有自己的一组私钥,有了私 ...

  2. SpringBoot整合模板引擎

    一.SpringBoot整合freemarker: 1.引入freemarker模板依赖: <dependency> <groupId>org.springframework. ...

  3. 将含有makefile文件的源码加入Eclipse工程

    转载自https://www.linuxidc.com/Linux/2011-02/32763.htm 很多软件在开发或者分析时需要一个像样的IDE,Eclipse是其中很优秀的一个,至少个人感觉很好 ...

  4. IntelliJ IDEA 创建Spring+SpringMVC+mybatis+maven项目

    参考自:https://www.cnblogs.com/hackyo/p/6646051.html 第一步: 创建maven项目 输入项目名和工程id 选择maven 默认就可以了 刚开始时间比较长, ...

  5. [福大软工] Z班 第5次成绩排行榜

    作业链接 http://www.cnblogs.com/easteast/p/7613070.html 作业要求 团队项目--选题报告 1)发布博客: 一个团队发布一篇随笔,内容为团队的选题报告,选题 ...

  6. 面试总结——JVM篇

    前言:该篇主要对Java虚拟机相关的题目进行介绍. JVM篇 基本上在面试的时候,都会或多或少的涉及JVM,主要看面试官的侧重点,笔者在面试过程中,是通过volatile问题,引导了JVM相关问题上的 ...

  7. 快速排序 O(n logn) 堆排序 O(n logn) 归并排序 O(n logn)

    NB三人组 快速排序 思路" 取一个元素P (第一个元素), 使元素归位 列表被P 分成两部分,左边都比P小,右边比P大; 递归完成排序. 问题 如果是已经排序好的 倒叙 列表 则会 递归深 ...

  8. linux 下的启动项

    /etc/profile  这个也是启动脚本.而且优先级很高哦.. 以下都是网上找来的 (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片 ...

  9. WPF之DataGrid应用 翻页

    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...

  10. Python:Day46 Javascript DOM

    history对象: History 对象包含用户(在浏览器窗口中)访问过的 URL.窗口之间是相互独立的. <input type="button" onclick=&qu ...