在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 Ueditorclass 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了，我上面的方法也许不是最好的，这个方法先保障能用上，也希望大家交流优化。
55
