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

稍微讲一下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",
    }
}

原文地址:https://www.cnblogs.com/zzy0306/p/8608286.html

时间: 2024-10-04 19:04:34

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

django xadmin 集成DjangoUeditor富文本编辑器

本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://github.com/wsqy/DjangoUeditor.git 解压后将 DjangoUeditor 文件夹复制到django项目目录下,跟app目录同级 修改app models 导入UEditorField 模块 增加需要富文本框的字段 from DjangoUeditor.models impor

Django中在xadmin中集成DjangoUeditor

python版本:3.6 django:1.10.8 1.下载xadmin https://github.com/sshwsfc/xadmin 下载DjangoUeditor https://github.com/twz915/DjangoUeditor3 2.直接将xadmin和DjangoUeditor集成在pycharm里,在项目下新建一个文件夹extra_apps,将与xadmin.DjangoUeditor的同名文件复制在extra_apps下 3.在settings.py里注册Dja

django xadmin后台集成DjangoUeditor

安装和配置xadmin 1. 安装(注意区分版本) python2.x pip install xadmin python3.x # 方式1 pip install git+git://github.com/sshwsfc/xadmin.git # 方式2 下载https://codeload.github.com/sshwsfc/xadmin/zip/master,解压并进入目录下,直接python setup.py install 2. 配置 1. 将xadmin添加到settings.py

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

第三百九十四节,Django+Xadmin打造上线标准的在线教育平台-Xadmin集成富文本框 首先安装Django Ueditor1.8.143模块 下载地址 https://pypi.python.org/pypi/DjangoUeditor/1.8.143 下载后  python setup.py install  安装 安装好后在settings.py将DjangoUeditor添加到app INSTALLED_APPS = [ 'django.contrib.admin', 'djan

AngularJS集成富文本编辑器

最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: 首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官网http://www.wangeditor.com/ 进行下载,里面文档内容也很容易理解,可以自行配置.下载后解压,我们需要用到的主要是wangEditor.js或者 wangEditor

禁止ecshop杂志编辑器自动修改路径

ECSHOP杂志管理发送促销邮件功能十分强大,但每次编辑内容保存时,均会将HTML邮件内容的"src="替换为'src=http://.$_SERVER["HTTP_HOST"]',即每次保存均在"src"引用的内容中增加站点路径,例如: 第一次保存: src="http://mm.meiwei101.com//test.jpg" 第二次保存: src="http://mm.meiwei101.com/http://

修复百度编辑器插入视频的bug

修复百度编辑器插入视频的bug,可实时预览视频,可修改到支持手机查看视频 开程序员的淘宝店!寻找开源技术服务伙伴!>>>   站在前人的肩膀上我们就可以站的更高,看得更远. 所以,请在 ueditor.config.js中搜索 whitlist , 在后面加入 source: ['src', 'type'], embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode

TFS中Web管理编辑器插入图片路径问题

在使用TFS的Web管理,新建工作时在编辑器中添加附件,成功之后在编辑器中经常无法正常显示(没有使用机器名访问TFS服务器.或者跟服务器不同的域或者使用外网地址访问等). 首先找到: Microsoft Team Foundation Server 12.0\Application Tier\Web Services\web.config文件中的 <compilation defaultLanguage="c#" explicit="true" debug=&

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

我这边配置进去之后,界面加载,文本输入都没有问题,就是上传图片会有问题 这张图, 左边红色框框 就是目录结构咯, 右边红色框框 就是各种网上教程给出的第一个路径配置对吧, 下面的就是绿色 服务器接口配置把? 这个我不是太清楚, 但是我上传图片的后台接口就是这么走的..... 这就是我在ueditor.config.js 里面做的两个唯一的配置! 然后另一个配置文件php/config.json也有相应的修改,截图如下: 右边红色框框嘛, 就是我认为的需要修改的路径吧~ 当然了,这里只涉及到了图片