django配置Ueditor富文本编辑器

时间:2021-06-30 02:18:03

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&period;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. iOS通知

    链接: IOS之推送通知(本地推送和远程推送) iOS 10推送通知开发 活久见的重构 - iOS 10 UserNotifications 框架解析 iOS10全新推送功能的实现

  2. CSS优先级总结&lpar;转载&rpar;

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  3. 数据结构之单链表,c&num;实现

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Thinkphp中field和getField

    在数据库查询操作中field和getField方法是使用最频繁的.可是两者是有一定差别的.在这里记录下. field方法是用于定义要查询的字段(支持字段排除). getField方法获取数据表中的某个 ...

  5. 白话ASP&period;NET MVC之三:Controller是如何解析出来的

    我们在上一篇文章中介绍Controller激活系统中所涉及到的一些类型,比如有关Controller类型的相关定义类型就包括了IController类型,IAsyncController类型,Cont ...

  6. 用postal&period;js在AngularJS中实现订阅发布消息

    点击查看AngularJS系列目录 用postal.js在AngularJS中实现event bus 用postal.js在AngularJS中实现event bus 理想状态下,在一个Angular ...

  7. Form 组件的学习

    学习链接:http://www.cnblogs.com/haiyan123/p/7778888.html Form组件可以做的几件事情: 1.用户请求数据验证 2.自动生成错误信息 3.打包用户提交的 ...

  8. lambda表达式和表达式树(深入理解c&num;)

    1.Lambda形式 1). Lambda表达式最冗长的形式: (显式类型的参数列表)=>{语句} 2). 大多数时候,都可以用一个表达式来表示主体,该表达式的值是Lambda的结果,在这些情况 ...

  9. linux shell 脚本攻略学习14--head命令详解&comma;tail命令详解

    当要查看上千行的大文件时,我们可不会用cat命令把整个文件内容给打印出来,相反,我们可能只需要看文件的一小部分地内容(例如文件的前十行和后十行),我们也有可能需要打印出来前n行或后n行,也有可能打印除 ...

  10. ETSI公布的多接入移动边缘计算概念验证

    ETSI多接入移动边缘计算 公布的概念验证如下: 来源 MEC PoC Projects PoC#1: "Video User Experience Optimization via MEC ...