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

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

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

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

[python] view plain copy

  1. from DjangoUeditor.models import UEditorField

[python] view plain copy

  1. content=UEditorField(verbose_name='博客内容',
  2. width=700,
  3. height=400,
  4. toolbars='full',
  5. imagePath='ueditor/images/',
  6. filePath='ueditor/files/',
  7. upload_settings={'imageMaxSizing':1024000},
  8. default='')

5.xadmin中添加插件ueditor

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

[python] view plain copy

  1. import xadmin
  2. from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
  3. from DjangoUeditor.models import UEditorField
  4. from DjangoUeditor.widgets import UEditorWidget
  5. from django.conf import settings
  6. class XadminUEditorWidget(UEditorWidget):
  7. def __init__(self,**kwargs):
  8. self.ueditor_options=kwargs
  9. self.Media.js = None
  10. super(XadminUEditorWidget,self).__init__(kwargs)
  11. class UeditorPlugin(BaseAdminPlugin):
  12. def get_field_style(self, attrs, db_field, style, **kwargs):
  13. if style == 'ueditor':
  14. if isinstance(db_field, UEditorField):
  15. widget = db_field.formfield().widget
  16. param = {}
  17. param.update(widget.ueditor_settings)
  18. param.update(widget.attrs)
  19. return {'widget': XadminUEditorWidget(**param)}
  20. return attrs
  21. def block_extrahead(self, context, nodes):
  22. js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")         #自己的静态目录
  23. js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")   #自己的静态目录
  24. nodes.append(js)
  25. xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
  26. xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

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

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

在页面上要取消转义

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

1.在settings里面配置

[python] view plain copy

  1. MEDIA_URL='/media/'
  2. MEDIA_ROOT=os.path.join(BASE_DIR,'media')

[python] view plain copy

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

django配置Ueditor富文本编辑器的更多相关文章

  1. python3 Django集成Ueditor富文本编辑器

    1.下载 python3: https://github.com/twz915/DjangoUeditor3/ (直接下载zip) 2.解压,解压打开后找到DjangoUeditor将DjangoUe ...

  2. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

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

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

  4. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  5. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  6. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  7. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  8. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  9. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

随机推荐

  1. UI基础一:简单的BOL查询

    利用标准的BOL编辑工具,添加BOL对象,重写查询方法,实现简答的BOL查询 1.SE11创建查询对象结构: 2.SE11创建查询结果对象: 3.SE24新建处理类: 重写查询结果方法: METHOD ...

  2. Linux在shell中输入历史命令

    在Linux的shell中,经常输入的命令有很多雷同,甚至是一样的, 如果是长命令,再次敲一遍效率真的是很低, 不过可以通过Ctl+r,  查找history中以前输入的命令,很是好用. 按Ctrl+ ...

  3. HTML5 <li> <ol> <ul> 用法

    定义和用法 <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中. HTML 与 XHTML 之间的差 ...

  4. Git中的文件上传、修改、撤消修改和删除

     1.添加文件.提交文件 1.1在learngit目录下创建一个readme.txt文件,并且输入内容. 1.2添加文件到版本库learngit 1.2.1使用git add 文件告诉Git把文件添加 ...

  5. 使用JQuery 合并两个 json 对象

    一,保存object1和2合并后产生新对象,若2中有与1相同的key,默认2将会覆盖1的值 var object = $.extend({}, object1, object2); 二,将2的值合并到 ...

  6. 关于TCP长连接和发送心跳的一些理解

    原因 TCP是一种有连接的协议,但是这个连接并不是指有一条实际的电路,而是一种虚拟的电路.TCP的建立连接和断开连接都是通过发送数据实现的,也就是我们常说的三次握手.四次挥手.TCP两端保存了一种数据 ...

  7. linux的典型分支:

    1.redhat 2.debian 3.centOS 4.ubuntu 5.fedora 6.kali linux

  8. 利用awk处理学生成绩问题(难度较大)

    学生成绩表单如下: Name,Team,First Test, Second Test, Third Test Tom,Red,,, Joe,Green,,, Maria,Blue,,, Fred,B ...

  9. sqlalchem表关联(一对多,一对一,多对多)

    简介: 一:一对多关系 1.表示一对多的关系时,在子表类中通过 foreign key (外键)限制本列的值,然后,在父表类中通过 relationship() 方法来引用子表的类. 2.示例代码: ...

  10. RTTI,C++类型转换操作符

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...