Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下:
1、首先,pip安装ueditor的Django版本:
pip install DjangoUeditor
2、之后需要添加到项目的settings.py文件的INSTALLED_APPS下面
3、在urls.py文件中加入用于处理富文本的网址:
url(r'^ueditor/',include('DjangoUeditor.urls' ))
4、在model中使用UEditorField字段
from DjangoUeditor.models import UEditorField
class Blog(models.Model):
Name=models.CharField(,max_length=100,blank=True)
Content=UEditorField(u'内容 ',width=600, height=300,toolbars="full", imagePath="", filePath="",upload_settings={"imageMaxSize":1204000},settings={},command=None,event_handler=myEventHander(),blank=True)
UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。 定义UEditorField时除了可以直接传入models.TextField提供的参数外,还可以传入UEditorField提供的额外的参数 来控制UEditorField的外观、上传路径等。 UEditorField的参数如下:
width,height :编辑器的宽度和高度,以像素为单位。
toolbars :配置你想显示的工具栏,取值为mini,normal,full,代表小,一般,全部。如果默认的工具栏的按钮数量不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。
imagePath :图片上传后保存的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹。 注意:如果imagePath值只设置文件夹,则未尾要有"/" imagePath可以按python字符串格式化:如"images/%(basename)s_%(datetime)s.%(extname)s"。这样如果上传test.png,则文件会 被保存为"{{MEDIA_ROOT}}/images/test_20140625122399.png"。 imagePath中可以使用的变量有:
- time :上传时的时间,datetime.datetime.now().strftime("%H%M%S")
- date :上传时的日期,datetime.datetime.now().strftime("%Y%m%d")
- datetime :上传时的时间和日期,datetime.datetime.now().strftime("%Y%m%d%H%M%S")
- year : 年
- month : 月
- day : 日
- rnd : 三位随机数,random.randrange(100,999)
- basename : 上传的文件名称,不包括扩展名
- extname : 上传的文件扩展名
- filename : 上传的文件名全称
filePath : 附件上传后保存的路径,设置规则与imagePath一样。
upload_settings : 字典值, 例:upload_settings={ imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s", imageMaxSize:323232 fileManagerListPath:"files" }
- upload_settings的内容就是ueditor/php/config.json里面的配置内容,因此,你可以去看config.json或者官方文档内容来决定 该如何配置upload_settings,基本上就是用来配置上传的路径、允许上传的文件扩展名、最大上传的文件大小之类的。
- 上面的imagePath和filePath被单独提取出来配置,原因是因为这两个参数是最常使用到的,imagePath就相当于upload_settings里面的 imagePathFormat,filePath就相当于upload_settings里面的filePathFormat。
- 您upload_settings里面设置了imagePathFormat,也可以在UeditorField里面设置imagePath,效果是一样的。但是如果两者均设置, 则imagePath优先级更高。
- 涂鸦文件、截图、远程抓图、图片库的xxxxPathFormat如果没有配置,默认等于imagePath.
- 远程文件库的xxxxPathFormat如果没有配置,默认等于filePath.
settings : 字典值,配置项与ueditor/ueditor.config.js里面的配置项一致。
command : 可以为Ueditor新增一个按钮、下拉框、对话框,例:
Description = UEditorField(u'描述', blank=True, toolbars="full",imagePath="cool/", settings={"a": 1},command=[myBtn(uiName="mybtn1", icon="d.png", title=u"1摸我",ajax_url="/ajaxcmd/"),myCombo(uiName="myCombo3",title=u"ccc",initValue="aaa")])
5、创建ueditor插件
在项目中xadmin/Plugins中创建插件ueditor.py,写入下面代码:
# -*- coding: utf-8 -*-
import xadmin
from django.db.models import TextField
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_fiels_style(self, attrs, db_field, style, **kwargs):
"""
接收adminx中的style_fields键值对,分别赋值给db_field,style
"""
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文件
"""
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写入xadmin/Plugins/__init__.py文件中,__init__.py文件中有一个元组,存放xadmin的所有插件:
7、在某一个app的adminx.py文件中指明哪个字段使用ueditor样式:
8、有一个问题,当我们在富文本中写入非文本的内容时,页面不能正常显示内容:
加入了一个表情,显示的确实一段HTML代码。这是Django的CSRF防范的一种机制,它会对用户输入的字符进行转义
实际的网页源码是这样的。如果要正常显示这部分的内容,需要用到Django模板一个过滤器:
DjangoUeditor源码地址:https://github.com/zhangfisher/DjangoUeditor
参考:http://coding.imooc.com/class/78.html
Xadmin集成富文本编辑器ueditor的更多相关文章
- Django使用xadmin集成富文本编辑器Ueditor(方法二)
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框
第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...
- AngularJS集成富文本编辑器
最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
随机推荐
- 【Alpha】阶段 第七次 Scrum Meeting
每日任务 1.本次会议为第一次 Meeting会议: 2.本次会议在下午14:45,课间休息时间在禹州楼召开,召开本次会议为10分钟,根据大家的讨论分析得出的总结,讨论下接下来版本的改进计划: 一.今 ...
- 201521123033《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123002 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能 ...
- 201521123030《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 控制可见性的4个访问修饰符 private -- 仅对本类可见 public -- 对所有类 ...
- 201521123021《Java程序设计》第1周学习总结
1. 本章学习总结 1.第一次接触Java,初步了解Java的运行环境,学会了安装eclipse和JDK,解决了在安装中的path变量的设置问题. 2.知道了jvm,jre,jdk的区别,jdk是一个 ...
- 201521123039 《java程序设计》第九周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? ...
- 201521123080《Java程序设计》第14周学习总结
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 书面作业 MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) ...
- 201521123079《java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- MUI如何调取相册的方法
第一种是HTML方法 <label> <input style="opacity: 0;" type="file" accept=" ...
- 多线程面试题系列(7):经典线程同步 互斥量Mutex
前面介绍了关键段CS.事件Event在经典线程同步问题中的使用.本篇介绍用互斥量Mutex来解决这个问题. 互斥量也是一个内核对象,它用来确保一个线程独占一个资源的访问.互斥量与关键段的行为非常相似, ...