稍微讲一下DjangoUeditor的配置,因为之前去找配置的时候东拼西凑的,所以自己写一下自己一步步配置的过程。首先我是再github上去下载下来,因为是当作第三方插件集成到xadmin中,所以不用pip安装,直接和xadmin放一个目录就ok了。

然后是在项目的设置里面进行配置,在INSTALLED_APPS中申明DjangoUeditor的存在,

这两步做完之后就找到xadmin的plugins目录,在目录下新建一个ueditor.py的文件,其中的代码如下:

#!/usr/bin/env python
# -*- coding:utf-8 -*- 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)
然后在同一目录下找到__init__.py文件,在插件中申明ueditor插件的存在:

这样就将DjangoUeditor集成到xadmin当中了,接着就是使用的过程了,在模板中针对想要使用Ueditor编辑的字段,将其设置为UEditorField,然后进行相应的一些配置就可以了,其中包括了视频上传路径配置,只要再upload_settings中申明就可以了:
content = UEditorField(verbose_name='内容', width=600, height=300, toolbars='full',
imagePath='guide/images/', filePath='', upload_settings={'imageMaxSize': 1204000,
'videoPathFormat': "guide/videos/%(basename)s_%(datetime)s.%(extname)s"}, default='')
后再该app目录的adminx.py文件中对相应字段进行申明:
class GuideWordAdmin(object):
style_fields = {'content': 'ueditor'} xadmin.site.register(GuideWord, GuideWordAdmin)
打开后台,登陆之后就可以使用富文本编辑器了。
关于上传路径的配置,如果希望在上传的图片或视频之前加入前缀,可以在项目的setting中进行配置,比如我想直接拿资源,但是上传路径是不带有前缀的,所以资源只有一个文件路径,而不是一个可直接使用的URL资源,加上前缀之后只要文件路径是正确的,你就可以在自己的服务器下面直接输入域名查看相应文件了:

UEDITOR_SETTINGS = {
'config': { },
'upload': {
"imageUrlPrefix": "http://127.0.0.1:8000",
"videoUrlPrefix": "http://127.0.0.1:8000",
"fileUrlPrefix": "http://127.0.0.1:8000",
}
}

xadmin集成DjangoUeditor,以及编辑器的视频路径配置的更多相关文章

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

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

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

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

  3. xadmin集成DjangoUeditor

    1.安装 安装DjangoUeditor 1)去GitHub上面下载djangoueditor源码包(https://github.com/twz915/DjangoUeditor3)   然后进入源 ...

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

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

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

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

  6. AngularJS集成富文本编辑器

    最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...

  7. vue2.0集成百度UE编辑器,上传图片报错!!!

    我这边配置进去之后,界面加载,文本输入都没有问题,就是上传图片会有问题 这张图, 左边红色框框 就是目录结构咯, 右边红色框框 就是各种网上教程给出的第一个路径配置对吧, 下面的就是绿色 服务器接口配 ...

  8. Django xadmin引入DjangoUeditor

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

  9. macOS如何正确驱动集成显卡HDMI(包括视频和音频)

    聊聊如何正确驱动集成显卡HDMI(包括视频和音频)必备条件:1.必须使用AppleHDA驱动声卡(仿冒.clover.applealc都可以的),使用voodoo驱动声卡应该不行的.2.dsdt或者s ...

随机推荐

  1. PMP 第11章错题总结

    1.项目经理考虑每个人的观点并恢复秩序是合作/解决问题的技术2.评价团队有效性的指标包括---个人技能的改进.团队能力的改进.团队成员离职率的降低.团队凝聚力的加强3.管理质量包括所有质量保证活动,还 ...

  2. shell基础知识8-xargs命令

    简介 xargs 命令应该紧跟在管道操作符之后.它使用标准输入作为主要的数据源,将从 stdin 中 读取的数据作为指定命令的参数并执行该命令. 将多行输入转换成单行输出 [root@dns-node ...

  3. php异常处理小总结

    2019年8月23日10:56:31 php很多开发不习惯使用异常处理,因为web开发,重在于快速开发,易用性,高性能,不强调程序健壮性 php的异常使用其实不是太完善,易用性也差点,当然这个对比其他 ...

  4. tracking.js实现前端人脸识别

    1.下载https://trackingjs.com/ 2.运行例子 纳总一下 发现效果 里面的代码为 <!doctype html><html><head> &l ...

  5. ASP.NET Core DotNetCore 开源GitServer 实现自己的GitHub

    ASP.NET Core 2.0 开源Git HTTP Server,实现类似 GitHub.GitLab. GitHub:https://github.com/linezero/GitServer ...

  6. 移动端自适应rem的设置

    一般所熟知的css样式大小单位有px,em. px:精确地描述元素大小,不随屏幕大小的变化而变化: em:相对于父元素的大小,如果有层层嵌套的话会导致这个值非常大或者非常小. 在写移动端页面的时候为了 ...

  7. SQL Server 数据库启动过程(用户数据库加载过程的疑难杂症)

    前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...

  8. 工厂方法(FactoryMethod)模式

    之前说了简单工厂设计模式如果增加一个新的运算的时候需要:增加一个具体的实现类,工厂类中增加一个case分支.也就是说我们不但对扩展开发了,也对修改开放了,违背了开闭原则.当然如果工厂类采用反射的话不存 ...

  9. 洛谷P3984-数据结构 题解

    题面 这题精,真的精 前言:不要被题目背景和描述误导! Solution: 题目大意 给定一段序列,请你做到区间修改和区间询问. 区间询问即 在 \(L\) 到 \(R\) 区间内,乘上下标后取模的值 ...

  10. 长乐国庆集训Day5-2

    T1 彩虹 题目 [题目描述] Mr.Raju和他的一个大家庭外出度假,他们想要乘着彩虹欣赏周围的景色,但是这样最会有一些问题. 在他们家族中,如果一个人想要骑上彩虹,那么他喜欢的所有人和喜欢他的所有 ...