django入门8之xadmin引入富文本和excel插件

django入门8之xadmin引入富文本和excel插件

Xadmin引入富文本

插件的文档

https://xadmin.readthedocs.io/en/docs-chinese/make_plugin.html

Django ueditor插件的安装

下载地址:https://github.com/zhangfisher/DjangoUeditor

进入mxonline的虚拟环境

Python setup.py install

进行安装

在settings.py中引入ueditor

在url配置中引入

# 富文本相关url
url(r‘^ueditor/‘,include(‘DjangoUeditor.urls‘ )),

在课程中引入富文本

from DjangoUeditor.models import UEditorField

替换models中具体的字段

# 详情用富文本代替
detail = UEditorField(verbose_name=u‘课程详情‘, width=600, height=300, imagePath="courses/ueditor/", filePath="courses/ueditor/",default=‘‘)

编写插件

Ueditor.py

# _*_ coding:utf-8 _*_
# __author__ == ‘jack‘
# __date__ == ‘2019-11-09 10:48 AM‘

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文件中引入ueditor插件

添加课程可以看到富文本已经引入了

使用上传图片的时候报错如下:

D:\python2.7.16\Lib\importlib\__init__.py:37: RemovedInDjango110Warning: django.core.context_processors is deprecated in favor of django.template.context_processors.

__import__(name)

[09/Nov/2019 11:10:21] "GET /xadmin/courses/course/add/ HTTP/1.1" 200 50916

[09/Nov/2019 11:10:21] "GET /xadmin/jsi18n/ HTTP/1.1" 200 4869

[09/Nov/2019 11:10:22] "GET /ueditor/controller/?imagePathFormat=courses%2Fueditor%2F&filePathFormat=courses%2Fueditor%2F&action=config&&noCache=1573269022050 HTTP/1.1" 200 2171

Forbidden (CSRF token missing or incorrect.): /ueditor/controller/

[09/Nov/2019 11:10:27] "POST /ueditor/controller/?imagePathFormat=courses%2Fueditor%2F&filePathFormat=courses%2Fueditor%2F&action=uploadimage HTTP/1.1" 403 2266

pydev debugger: process 34408 is connecting

解决办法:

找到源码修改views.py 文件中的get_ueditor_controller方法

添加装饰器

步骤总结:

前端显示的时候直接显示了转义后的代码

解决办法:在模板页面关闭自动转义

引入导入excel的功能

修改__init__.py 增加’excel’插件

Excel.py插件

# _*_ coding:utf-8 _*_
# __author__ == ‘jack‘
# __date__ == ‘2019-11-09 11:49 AM‘

import xadmin
from xadmin.views import BaseAdminPlugin, ListAdminView
from django.template import loader

# excel导入
class ListImportExcelPlugin(BaseAdminPlugin):
    import_excel = False

    def init_request(self, *args, **kwargs):
        return bool(self.import_excel)

    def block_top_toolbar(self, context, nodes):
        nodes.append(loader.render_to_string("xadmin/excel/model_list_top.boolbar.import.html", context_instance=context))

xadmin.site.register_plugin(ListImportExcelPlugin, ListAdminView)

具体的html

xadmin/excel/model_list.top_boolbar.import.html

{% load i18n %}
<div class="btn-group export">
  <a class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown" href="#">
    <i class="icon-share"></i> 导入 <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><a data-toggle="modal" data-target="#export-modal-import-excel"><i class="icon-circle-arrow-down"></i> 导入 Excel</a></li>
  </ul>
    <script>
        function fileChange(target){
//检测上传文件的类型
            var imgName = document.all.submit_upload.value;
            var ext,idx;
            if (imgName == ‘‘){
                document.all.submit_upload_b.disabled=true;
                alert("请选择需要上传的 xls 文件!");
                return;
            } else {
                idx = imgName.lastIndexOf(".");
                if (idx != -1){
                    ext = imgName.substr(idx+1).toUpperCase();
                    ext = ext.toLowerCase( );
{#                    alert("ext="+ext);#}
                    if (ext != ‘xls‘ && ext != ‘xlsx‘){
                        document.all.submit_upload_b.disabled=true;
                        alert("只能上传 .xls 类型的文件!");

                        return;
                    }
                } else {
                    document.all.submit_upload_b.disabled=true;
                    alert("只能上传 .xls 类型的文件!");
                    return;
                }
            }

        }
    </script>
    <div id="export-modal-import-excel" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <form method="post" action="" enctype="multipart/form-data">
              {% csrf_token %}
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">导入 Excel</h4>
          </div>
          <div class="modal-body">
               <input type="file" onchange="fileChange(this)" name="excel" id="submit_upload">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            <button class="btn btn-success" type="submit" id="submit_upload_b"><i class="icon-share"></i> 导入</button>
          </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dalog -->
    </div><!-- /.modal -->

</div>

Course/adminx.py

原文地址:https://www.cnblogs.com/reblue520/p/12053689.html

时间: 2024-10-26 09:53:55

django入门8之xadmin引入富文本和excel插件的相关文章

第三百九十四节,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

Django 配置App特定类的富文本编辑器

版本:Django:1.6  Python:2.7 下载TinyMCE.http://www.tinymce.com/download/download.php 解压.将其中的tinymce文件夹放在Django的静态文件目录/static/下. 在tinymce文件夹中已经有tinymce.min.js这个JS文件:我们需要做的是在当前目录下(与tinymce.min.js同级)另外新建一个tinymce_config.min.js: 填充内容如下: tinymce.init({ select

react引入富文本编辑器TinyMCE

这周做了一个PC端的service后台需求,要求有富文本编辑器,插入图片.表格,字体字号背景色等等, 最后引入了富文本编辑器TinyMCE 对于TinyMCE的简介: TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器.同类程序有:UEditor.Kindeditor.Simditor.CKEditor.wangEditor.Suneditor.froala等等. TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能 接口丰富,可扩展性强,有

「wxParser」小程序插件:想在小程序中快速部署富文本?这个插件让你一步搞定

上期,我们在<「微信同声传译」小程序插件:快速实现语音转文字.文本翻译.语音合成等能力>一文中介绍了「微信同声传译」小程序插件的意义.作用以及应用.而在此之前,我们还介绍过「腾讯地图」.「腾讯视频」.「医院 LBS 位置服务」插件,有兴趣了解的读者可以点击「微信极客WeGeek」公众号底部菜单「极客干货 - 小程序插件」了解. 今天我们为大家推荐的是一款富文本渲染插件「wxParser」,目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持表格.代

django入门5使用xadmin搭建管理后台

环境搭建: pip install django==1.9.8 pip install MySQL_python-1.2.5-cp27-none-win_amd64.whl pip install future requests django-import-export six pip install  django-simple-captcha==0.4.6 pip install pillow pip install xadmin 然后再次 pip uninstall xadmin 把dja

vue-quill-editor 富文本集成quill-image-extend-module插件实例,以及UglifyJsPlugin打包抱错问题处理

官网 vue-quill-editor Toolbar Module - Quill vue-quill-image-upload 图片支持上传服务器并调整大小 1.在 package.json 中加入 "quill-image-extend-module": "^1.1.2" 依赖 2.在编辑器组件中引入以下代码 <template> <div class="in-editor-panel"> <quill-edi

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作 在项目根目录的public目录下

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: