Django xadmin后台添加富文本编辑器UEditor的用法
效果图:
步骤:
1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好的UEditor Down下来,然后放在自己的extra_apps文件夹中
并在setting.py文件中去添加路径配置
import os
import sys
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
# 设置 extra_apps 目录
# 项目文件夹下的setting文件 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
2.将DjangoUeditor 添加到settings.py文件的APP 里边
INSTALLED_APPS = [
....
# 配置富文本编辑器
'DjangoUeditor',
]
3.在urls.py文件中配置路由信息
#添加富文本路径信息
url(r'^ueditor/', include('DjangoUeditor.urls')),
4.修改models对应的字段
from DjangoUeditor.models import UEditorField
class Article(models.Model):
....
content = UEditorField(verbose_name='内容', height=400, width=800,
default=u'', imagePath="Article_img/%%Y/%%m/",
toolbars='full', filePath='Article_file/%%Y/%%m/',
upload_settings={"imageMaxSize": 1204000},
settings={}, command=None, )
5.在settings.py 设置 static 和 media
# 公共的 static 文件,比如 jquery.js 可以放这里,这里面的文件夹不能包含 STATIC_ROOT
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "common_static"),
) # upload folder
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
6.在urls.py 文件添加:
from django.conf import settings
...
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
6.在xadmin中添加Ueditor文件
在xadmin下的plugin中新建ueditor.py文件(我的是在extra_apps/xadmin,也可以在site_packages中找到对应的文件夹)添加如下代码:
#!/usr/bin/python3
# -*-coding:utf-8-*- 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.js") # 自己的静态目录
nodes.append(js) xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
7.将ueditor添加到plugin下的init中
PLUGINS = (
.....
'ueditor',
)
8.将ueditor添加到项目app里面的adminx.py中(!!!之前由于没有添加一直无法显示)
class ArticleAdmin(object):
style_fields = {'content': 'ueditor'}
......
7.在前端显示的话,需要对html页面修改如下
{% autoescape off %}
{{ course.detail }}
{% endautoescape %}
本博客参考:https://blog.csdn.net/wgpython/article/details/79585205
Django xadmin后台添加富文本编辑器UEditor的用法的更多相关文章
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- Django项目中添加富文本编辑器django-ckeditor
django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...
- django xadmin 集成DjangoUeditor富文本编辑器
本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
随机推荐
- li之间的间隙问题
1.间隙是有代码格式中的换行符产生,对代码进行压缩处理或手动删除换行就好:
- 健康检测文件httpchk.jsp
静态显示: <html><body><center> Now time is: <%=new java.util.Date()%> </cente ...
- Java IO流学习总结七:Commons IO 2.5-FileUtils
在上面的几篇文章中,介绍了IO的常规用法,今天介绍 Commons IO 框架的使用. Commons IO简介 Apache Commons IO是Apache基金会创建并维护的Java函数库.它提 ...
- Servlet开发
源地址:http://www.cnblogs.com/xdp-gacl/p/3760336.html 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun ...
- oracle合并语句
在sql server中的合并语句可以用xml path 详见http://www.cnblogs.com/codeyu/archive/2010/05/25/1743474.html 而oracle ...
- Chatbot中的填槽(Slot Filling)(转)
以下内容是学习了@我偏笑发布在公众号hanniman文章后,加上自己观点重新输出配图的文章 原文链接:http://t.cn/RE0FkgD 跳槽,吐槽,匹诺曹都听过,这个填槽,emmmm,黑人问号脸 ...
- SAP 费用
SAP在华真相:天价收费与用户之灾 SAP真的是企业实施ERP系统的最佳选择吗? 画皮SAP-世界管理软件公司的中国真相 你知道SAP吗?哦,知道,满大街都是嘛,S-P-A,SPA.做出上述回答的是一 ...
- 1.5.1、CDH 搭建Hadoop在安装之前(定制安装解决方案---使用内部包裹存储库)
使用内部包裹存储库 您可以通过托管内部存储库或手动将存储库文件复制到Cloudera Manager主机来为Cloudera Manager创建parcel存储库. 继续阅读: 托管内部包裹存储库 配 ...
- 如何区分Java中的方法重载和重写
首先说的是重载: 方法的重载 * 在同一个类中,方法名相同,参数列表不同.与返回值类型无关. * 参数列表不同: * A:参数个数不同 * B:参数类型不同 * C:参数的顺序不同(不算重载 报错) ...
- day16 包的使用 json time 常用模块
复习 1.判断py文件的两种用途 提到判断__name__ == '__main__'时,会执行py文件, 直接输入main,在pycharm里按tab直接自动输入这条语句 2.解决模块相互导入的问题 ...