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. 【转】MVC5学习笔记 BindAttribute

    // POST: Movies/Create // 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关 // 详细信息,请参阅 http://go.microsoft.com/fwlink/?L ...

  2. LSTM UEBA异常检测——deeplog里其实提到了,就是多分类LSTM算法,结合LSTM预测误差来检测异常参数

    结合CNN的可以参考:http://fcst.ceaj.org/CN/article/downloadArticleFile.do?attachType=PDF&id=1497 除了行为,其他 ...

  3. 两个有序数组的中位数(第k大的数)

    问题:两个已经排好序的数组,找出两个数组合并后的中位数(如果两个数组的元素数目是偶数,返回上中位数). 感觉这种题目挺难的,尤其是将算法完全写对.因为当初自己微软面试的时候遇到了,但是没有想出来思路. ...

  4. ffmpeg录制流媒体,正常方式停止录制

    QProcess m_Process; m_Process.setProcessChannelMode(QProcess::MergedChannels); //拼接命令行字符串 QString cm ...

  5. auxre7使用安装

    auxre7安装     1● auxre7下载 2● 安装 D:\soft   axureuser 8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyP ...

  6. ubuntu下唤醒或休眠远程计算机

    ubuntu让我明白,没有什么完美的东西,要想完美必须付出代价.要么花时间折腾,要么花时间赚钱买系统. 人生也是一样,所以不要期待什么完美.哪有那么好的人,在合适的时间合适的地点让你遇见,还对你有感觉 ...

  7. AI工具(矩形工具)(椭圆工具的操作与矩形类似)(剪切蒙版)5.11

    矩形工具:按住SHIFT键,可以绘制一个正方形. 按住ALT键,可以绘制以落点为中心的矩形. 同时按住SHIFT和ALT键可以绘制以鼠标落点为中心的正方形. 选择矩形工具,点击页面,输入高宽,精确绘制 ...

  8. learning svn change commit log

    将repository内hook子文件夹中的pre-revprop-change.tmpl复制改成pre-revprop-change.bat,内容改为:exit 0

  9. poj3261

    题解: 同bzoj1717 代码: #include<bits/stdc++.h> using namespace std; ,P2=,P=; int a1[P],num[P],a2[P] ...

  10. java④

    1. 一元运算符:一个表达式就可以参与运算! * ++ -- * * 二元运算符:二个表达式就可以参与运算! * + / * - % * * 三元运算符:三个表达式就可以参与运算! * 数据类型 变量 ...