在django的admin中使用Ueditor,只需要 pip install Django-Ueditor,然后按照说明文档安装即可。 但是如果后台使用了xadmin,Django-Ueditor就不起作用了,这里我就把在xadmin后台使用Ueditor的使用步骤展示出来分享给大家:
1. 基础环境
- django-----》pip install django
- django-ueditor ----》 pip install django-ueditor
- django-xadmin-----》pip install django-xadmin
2. 集成步骤
下载Ueditor 官方压缩包php版本 http://ueditor.baidu.com/build/build_down.php?t=1_2_6_1-utf8-php 解压后如下几个文件:
将文件夹放入 项目的static 目录下面,我取名ueditor,名字随意,如下:
接下来制作一个widget,在项目下建立了一个rte的文件夹,然后添加了一个__init__.py空文件和一个widgets.py文件,代码如下:
__author__ = 'Administrator'
#coding=utf8
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.template import RequestContext
from django.utils.translation import ugettext_lazy as _
from django.forms.widgets import RadioFieldRenderer, RadioInput
from django.utils.encoding import force_unicode
from django.utils.safestring import mark_safe
from django.utils.html import conditional_escape
from django.utils.translation import ugettext as _
from itertools import chain
class Ueditor(forms.Textarea):
def __init__(self,attrs={}):
super(Ueditor,self).__init__(attrs)
def render(self,name,value,attrs=None):
# rendered = super(Ueditor,self).render(name,value,attrs)
context = {
'name':name,
'STATIC_URL':settings.STATIC_URL,
'value':value,
}
return mark_safe(render_to_string('widgets/ueditor.html',context))
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href="{% static 'ueditor/themes/default/ueditor.css'%}" />
<script type="text/javascript" src="{% static 'ueditor/ueditor.all.js' %}" ></script>
<script type="text/javascript" src="{% static 'ueditor/ueditor.config.js'%}" ></script>
<script type="text/plain" id="myEditor" name="{{ name }}">
{% autoescape off %}
{{ value|default_if_none:'' }}
{% endautoescape %}
</script>
<script type="text/javascript">
var editor = new UE.ui.Editor({
});
editor.render("myEditor");
</script>
基本配置
编辑你的settings.py
STATIC_URL = '/asset/' #此处你的可能是/static/ 懂django配置的这个地方要注意下
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
#os.path.abspath(os.path.dirname(__file__))+'/static/',
('theme',os.path.abspath(os.path.dirname(__file__))+ '/static/theme'),
('images',os.path.abspath(os.path.dirname(__file__))+ '/static/images'),
('media',os.path.abspath(os.path.dirname(__file__))+'/static/media'),
#下面这一行也是需要添加的,也就是把ueditor目录放在静态文件夹中可以查找得到,这个配置其实就是类似于IIS里面的虚拟目录,逗号后面是绝对路径,为什么要写代码获取,因为,你的环境变了,后面的绝对路径要跟着变,所以用代码获取了,其实这块可以用一个常量简化下,演示为了让大家看的更清楚,就全贴出来
('ueditor',os.path.abspath(os.path.dirname(__file__))+'/static/ueditor'),
)
先编辑 static/ueditor/editor.config.js
window.UEDITOR_HOME_URL = "/asset/ueditor/"
//此处要配置为你的static url,为什么这里是/asset/ueditor ,因为我的settings.py里面STATIC_URL=/asset/ 如果你的是STATIC_URL=/static/,那么这里就填/static/editor
还是这个文件 第135 行开始:
/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL : URL
//图片上传配置区
,imageUrl:"/ueditor/ImageUp/upimg/" //图片上传提交地址
,imagePath:"/asset/media/upimg/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
//,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
//,compressSide:0 //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
//,maxImageSideLength:900 //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值,更多设置在image.html中
//涂鸦图片配置区
,scrawlUrl:URL+"php/scrawlUp.php" //涂鸦上传地址
,scrawlPath:URL+"php/" //图片修正地址,同imagePath
//附件上传配置区
,fileUrl:URL+"php/fileUp.php" //附件上传提交地址
,filePath:URL + "php/" //附件修正地址,同imagePath
//,fileFieldName:"upfile" //附件提交的表单名,若此处修改,需要在后台对应文件修改对应参数
//远程抓取配置区
,catchRemoteImageEnable:true //是否开启远程图片抓取,默认开启
,catcherUrl:"/ueditor/RemoteCatchImage/catchimg/" //处理远程图片抓取的地址
,catcherPath: "/asset/media/catchimg/" //图片修正地址,同imagePath
//,catchFieldName:"upfile" //提交到后台远程图片uri合集,若此处修改,需要在后台对应文件修改对应参数
//,separater:'ue_separate_ue' //提交至后台的远程图片地址字符串分隔符
//,localDomain:[] //本地顶级域名,当开启远程图片抓取时,除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost
//图片在线管理配置区
,imageManagerUrl: "/ueditor/ImageManager/upimg/" //图片在线管理的处理地址
,imageManagerPath: "/asset/media/upimg/" //图片修正地址,同imagePath
//屏幕截图配置区
,snapscreenHost: location.hostname //屏幕截图的server端文件所在的网站地址或者ip,请不要加http://
,snapscreenServerUrl: URL +"php/imageUp.php" //屏幕截图的server端保存程序,UEditor的范例代码为“URL +"server/upload/php/snapImgUp.php"”
,snapscreenPath: URL + "php/"
,snapscreenServerPort: location.port //屏幕截图的server端端口
//,snapscreenImgAlign: '' //截图的图片默认的排版方式
//word转存配置区
,wordImageUrl:URL + "php/imageUp.php" //word转存提交地址
,wordImagePath:URL + "php/" //
//,wordImageFieldName:"upfile" //word转存表单名若此处修改,需要在后台对应文件修改对应参数
//获取视频数据的地址
,getMovieUrl:URL+"php/getMovie.php" //视频数据获取地址
项目根目录urls.py中:
url(r'^ueditor/',include('DjangoUeditor.urls' )), #唯一用到DjangoUeditor的地方,写好的后台方法,非常感谢作者。
在你的media目录下面 建立一个upload文件夹,下面两个子文件夹
upimg(上传的图片保存的位置)
catchimg(远程图片下载后保存的位置)
这两个目录都要设置权限 linux为 777 windows下为everyone读写
至此,配置基本完成
4. 使用方法
app里面models.py里面有个Article模型,body 字段为 models.TextField实例代码:
在你项目里面任何一个目录写个adminx.py ,名称可以随意,目录可以随意
添加如下代码:
from newsite.rte.widgets import Ueditor
class ArticleAdmin(object):
style_fields = {"body": 'ueditor'}
file_storage = FileSystemStorage(location=os.path.join(settings.MEDIA_ROOT,'upload'))
#此处代码是指定上传文件的路径,目录权限要设置为777,windows上要设置为everyone 读写
def get_field_style(self, db_field, style, **kwargs):
if style in ('ueditor',):
attrs = {'widget': Ueditor} # 此处是顶部的widget引用
return attrs
进入下你的xadmin,对模型Artcle的编辑就可以使用Ueditor了,95%的功能正常了,没有问题。
5.问题与解决
完成以上步骤,基本上编辑没问题了,但是还遗留以下功能未配置:
- 上传图片 (已解决)(上面editor.config.js 135行下面配置好了)
- 图片管理(未解决) editor.config.js 上配置
- 自动下载远程图片到本地 (已解决)上面也配置好了
OK了,我上面的方法也许不是最好的,这个方法先保障能用上,也希望大家交流优化。