1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录

2.找到项目的settings文件,注册app

3.找到项目urls文件,配置DjangoUeditor路由

4.找到app下的models,在需要使用富文本框的字段使用UEditorField,相关参数含义可参考文档:https://github.com/zhangfisher/DjangoUeditor

from DjangoUeditor.models import UEditorField
content=UEditorField(verbose_name='博客内容',width=700,height=400,toolbars='full',imagePath='ueditor/images/',filePath='ueditor/files/',upload_settings{'imageMaxSizing':1024000},default='')

5.xadmin中添加插件ueditor

由于已经将xadmin源文件拷贝到了项目下,为extra_apps/xadmin,在xadmin下的plugin中新建一个ueditor.py文件,添加以下代码:

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)

6.将ueditor插件添加到plugins中的__init__.py的PLUGINS中

7.找到app下的adminx.py文件,配置插件

8.配置上传文件的加载路径

1.在settings里面配置

MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media') #在settings里面配置
from django.views.static import serve
#在urls里面配置
url(r'^media/(?P<path>.*)$',serve,{"document_root":settings.MEDIA_ROOT},name='media')

Django-xadmin后台配置富文本编辑器(方法一)的更多相关文章

  1. Django xadmin后台添加富文本编辑器UEditor的用法

    效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...

  2. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

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

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

  4. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  5. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  6. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  7. xadmin引入django-ckeditor富文本编辑器

    一.安装: pip install django-ckeditor 安装django-ckeditor库 https://github.com/django-ckeditor/django-ckedi ...

  8. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  9. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

随机推荐

  1. GCC编译警告选项总结

    一 前言 GCC有很多的编译选项,警告选项:指定头文件.库路径:优化选项.本文针整理一下GCC的警告选项,主要依据http://gcc.gnu.org/onlinedocs/gcc/Warning-O ...

  2. 设置UICollectionViewCell圆角和阴影

    设置cell圆角: cell.contentView.layer.cornerRadius =2.0f; cell.contentView.layer.borderWidth =1.0f; cell. ...

  3. 搭建Vue开发环境

    1.安装Node.js 安装包下载地址: https://nodejs.org/en/ 安装时可以选择是否自动安装必要的工具,如Chocolatey.Python2,这里我选择了自动安装 Node.j ...

  4. MySQL集群读写分离的自定义实现

    基于MySQL Router可以实现高可用,读写分离,负载均衡之类的,MySQL Router可以说是非常轻量级的一个中间件了.看了一下MySQL Router的原理,其实并不复杂,原理也并不难理解, ...

  5. FAQ: Oracle Flex ASM 12c / 12.1 (Doc ID 1573137.1)

    FAQ: Oracle Flex ASM 12c / 12.1 (Doc ID 1573137.1) APPLIES TO: Oracle Database - Enterprise Edition ...

  6. 数据治理的王者——Apache Atlas

    一.Atlas是什么? 在当今大数据的应用越来越广泛的情况下,数据治理一直是企业面临的巨大问题. 大部分公司只是单纯的对数据进行了处理,而数据的血缘,分类等等却很难实现,市场上也急需要一个专注于数据治 ...

  7. 以太网驱动的流程浅析(四)-以太网驱动probe流程【原创】

    以太网驱动的流程浅析(四)-以太网驱动probe流程 Author:张昺华 Email:920052390@qq.com Time:2019年3月23日星期六 此文也在我的个人公众号以及<Lin ...

  8. Cocos2d-x3.0网络通信学习(一)

    配置:win7+Cocos2d-x.3.0+VS2012 摘要:建立基本的http通信并得到返回信息. 一.添加项目与编译库 1.添加头文件 在需要用到Http网络相关类的文件中加入头文件 #incl ...

  9. VS 2017 中取消自动补全花括号

    输入 "{", VS 会很智能的给你补全,得到 “{}”, 如果不想享受这个服务,可以按以下设置取消: Tools -> Options -> Text Editor ...

  10. 源生JS实现点击复制功能

    之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能.给他解决后现在来总结归纳一下,顺便做个笔记. PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我. ...