在使用django开发网站的过程中经常有需要用到富文本编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码
官网地址:http://ueditor.baidu.com/website/
将ueditor源码放到django静态文件static下后
在页面中引入一下js
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor', {
serverUrl: "/upload/"
});
</script>
在django工程的views.py文件中定义对应的视图函数:
def upload(request):
mimetype = 'application/json'
result = {}
action = request.GET.get('action')
with open("/data/myblog/static/ueditor/php/config.json") as fp:
CONFIG = json.loads(re.sub(r'\/\*.*\*\/', '', fp.read()))
if action == 'config':
# 初始化时,返回配置文件给客户端
result = CONFIG
elif action in ('uploadimage', 'uploadfile', 'uploadvideo'):
# 图片、文件、视频上传
if action == 'uploadimage':
fieldName = CONFIG.get('imageFieldName')
config = {
"pathFormat": CONFIG['imagePathFormat'],
"maxSize": CONFIG['imageMaxSize'],
"allowFiles": CONFIG['imageAllowFiles']
}
elif action == 'uploadvideo':
fieldName = CONFIG.get('videoFieldName')
config = {
"pathFormat": CONFIG['videoPathFormat'],
"maxSize": CONFIG['videoMaxSize'],
"allowFiles": CONFIG['videoAllowFiles']
}
else:
fieldName = CONFIG.get('fileFieldName')
config = {
"pathFormat": CONFIG['filePathFormat'],
"maxSize": CONFIG['fileMaxSize'],
"allowFiles": CONFIG['fileAllowFiles']
}
if fieldName in request.FILES.keys():
field = request.FILES.get(fieldName)
print "field:",field
uploader = Uploader(field, config, '/data/myblog/static')
result = uploader.getFileInfo()
else:
result['state'] = '上传接口出错'
elif action in ('uploadscrawl'):
# 涂鸦上传
fieldName = CONFIG.get('scrawlFieldName')
config = {
"pathFormat": CONFIG.get('scrawlPathFormat'),
"maxSize": CONFIG.get('scrawlMaxSize'),
"allowFiles": CONFIG.get('scrawlAllowFiles'),
"oriName": "scrawl.png"
}
if fieldName in request.form:
field = request.form[fieldName]
uploader = Uploader(field, config, '/data/myblog/static', 'base64')
result = uploader.getFileInfo()
else:
result['state'] = '上传接口出错'
elif action in ('catchimage'):
config = {
"pathFormat": CONFIG['catcherPathFormat'],
"maxSize": CONFIG['catcherMaxSize'],
"allowFiles": CONFIG['catcherAllowFiles'],
"oriName": "remote.png"
}
fieldName = CONFIG['catcherFieldName']
if fieldName in request.form:
# 这里比较奇怪,远程抓图提交的表单名称不是这个
source = []
elif '%s[]' % fieldName in request.form:
# 而是这个
source = request.form.getlist('%s[]' % fieldName)
_list = []
for imgurl in source:
uploader = Uploader(imgurl, config, '/data/myblog/static', 'remote')
info = uploader.getFileInfo()
_list.append({
'state': info['state'],
'url': info['url'],
'original': info['original'],
'source': imgurl,
})
result['state'] = 'SUCCESS' if len(_list) > 0 else 'ERROR'
result['list'] = _list
else:
result['state'] = '请求地址出错'
result = json.dumps(result)
if 'callback' in request.GET.keys():
callback = request.GET.get('callback')
if re.match(r'^[\w_]+$', callback):
result = '%s(%s)' % (callback, result)
mimetype = 'application/javascript'
else:
result = json.dumps({'state': 'callback参数不合法'})
return HttpResponse(result,content_type='application/json')
同时在views.py头部引入外部文件
from uploader import Uploader
uploader.py文件的内容为:
# -*- coding: utf-8 -*-
import os
import re
import json
import base64
import random
import urllib
import datetime
from werkzeug.utils import secure_filename
class Uploader:
stateMap = [ # 上传状态映射表,国际化用户需考虑此处数据的国际化
"SUCCESS", # 上传成功标记,在UEditor中内不可改变,否则flash判断会出错
"文件大小超出 upload_max_filesize 限制",
"文件大小超出 MAX_FILE_SIZE 限制",
"文件未被完整上传",
"没有文件被上传",
"上传文件为空",
]
stateError = {
"ERROR_TMP_FILE": "临时文件错误",
"ERROR_TMP_FILE_NOT_FOUND": "找不到临时文件",
"ERROR_SIZE_EXCEED": "文件大小超出网站限制",
"ERROR_TYPE_NOT_ALLOWED": "文件类型不允许",
"ERROR_CREATE_DIR": "目录创建失败",
"ERROR_DIR_NOT_WRITEABLE": "目录没有写权限",
"ERROR_FILE_MOVE": "文件保存时出错",
"ERROR_FILE_NOT_FOUND": "找不到上传文件",
"ERROR_WRITE_CONTENT": "写入文件内容错误",
"ERROR_UNKNOWN": "未知错误",
"ERROR_DEAD_LINK": "链接不可用",
"ERROR_HTTP_LINK": "链接不是http链接",
"ERROR_HTTP_CONTENTTYPE": "链接contentType不正确"
}
def __init__(self, fileobj, config, static_folder, _type=None):
"""
:param fileobj: FileStorage, Base64Encode Data or Image URL
:param config: 配置信息
:param static_folder: 文件保存的目录
:param _type: 上传动作的类型,base64,remote,其它
"""
self.fileobj = fileobj
self.config = config
self.static_folder = static_folder
self._type = _type
if _type == 'base64':
self.upBase64()
elif _type == 'remote':
self.saveRemote()
else:
self.upFile()
def upBase64(self):
# 处理base64编码的图片上传
img = base64.b64decode(self.fileobj)
self.oriName = self.config['oriName']
self.fileSize = len(img)
self.fileType = self.getFileExt()
self.fullName = self.getFullName()
self.filePath = self.getFilePath()
# 检查文件大小是否超出限制
if not self.checkSize():
self.stateInfo = self.getStateError('ERROR_SIZE_EXCEED')
return
# 检查路径是否存在,不存在则创建
dirname = os.path.dirname(self.filePath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
self.stateInfo = self.getStateError('ERROR_CREATE_DIR')
return
elif not os.access(dirname, os.W_OK):
self.stateInfo = self.getStateError('ERROR_DIR_NOT_WRITEABLE')
return
try:
with open(self.filePath, 'wb') as fp:
fp.write(img)
self.stateInfo = self.stateMap[0]
except:
print "11111"
self.stateInfo = self.getStateError('ERROR_FILE_MOVE')
return
def upFile(self):
# 上传文件的主处理方法
print type(self.fileobj)
self.oriName = self.fileobj.name
# 获取文件大小
# self.fileobj.stream.seek(0, 2)
self.fileSize = self.fileobj.size
self.fileobj.size
self.fileType = self.getFileExt()
self.fullName = self.getFullName()
self.filePath = self.getFilePath()
# 检查文件大小是否超出限制
if not self.checkSize():
self.stateInfo = self.getStateError('ERROR_SIZE_EXCEED')
return
# 检查是否不允许的文件格式
if not self.checkType():
self.stateInfo = self.getStateError('ERROR_TYPE_NOT_ALLOWED')
return
# 检查路径是否存在,不存在则创建
dirname = os.path.dirname(self.filePath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
self.stateInfo = self.getStateError('ERROR_CREATE_DIR')
return
elif not os.access(dirname, os.W_OK):
self.stateInfo = self.getStateError('ERROR_DIR_NOT_WRITEABLE')
return
try:
with open(self.filePath,"wb") as f:
for chunk in self.fileobj.chunks():
f.write(chunk)
self.stateInfo = self.stateMap[0]
except:
self.stateInfo = self.getStateError('ERROR_FILE_MOVE')
return
def saveRemote(self):
_file = urllib.urlopen(self.fileobj)
self.oriName = self.config['oriName']
self.fileSize = 0
self.fileType = self.getFileExt()
self.fullName = self.getFullName()
self.filePath = self.getFilePath()
# 检查文件大小是否超出限制
if not self.checkSize():
self.stateInfo = self.getStateError('ERROR_SIZE_EXCEED')
return
# 检查路径是否存在,不存在则创建
dirname = os.path.dirname(self.filePath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
self.stateInfo = self.getStateError('ERROR_CREATE_DIR')
return
elif not os.access(dirname, os.W_OK):
self.stateInfo = self.getStateError('ERROR_DIR_NOT_WRITEABLE')
return
try:
with open(self.filePath, 'wb') as fp:
fp.write(_file.read())
self.stateInfo = self.stateMap[0]
except:
print "3333"
self.stateInfo = self.getStateError('ERROR_FILE_MOVE')
return
def getStateError(self, error):
# 上传错误检查
return self.stateError.get(error, 'ERROR_UNKNOWN')
def checkSize(self):
# 文件大小检测
return self.fileSize <= self.config['maxSize']
def checkType(self):
# 文件类型检测
return self.fileType.lower() in self.config['allowFiles']
def getFilePath(self):
# 获取文件完整路径
rootPath = self.static_folder
filePath = ''
for path in self.fullName.split('/'):
filePath = os.path.join(filePath, path)
return os.path.join(rootPath, filePath)
def getFileExt(self):
# 获取文件扩展名
return ('.%s' % self.oriName.split('.')[-1]).lower()
def getFullName(self):
# 重命名文件
now = datetime.datetime.now()
_time = now.strftime('%H%M%S')
# 替换日期事件
_format = self.config['pathFormat']
_format = _format.replace('{yyyy}', str(now.year))
_format = _format.replace('{mm}', str(now.month))
_format = _format.replace('{dd}', str(now.day))
_format = _format.replace('{hh}', str(now.hour))
_format = _format.replace('{ii}', str(now.minute))
_format = _format.replace('{ss}', str(now.second))
_format = _format.replace('{ss}', str(now.second))
_format = _format.replace('{time}', _time)
# 过滤文件名的非法自负,并替换文件名
_format = _format.replace('{filename}',
secure_filename(self.oriName))
# 替换随机字符串
rand_re = r'\{rand\:(\d*)\}'
_pattern = re.compile(rand_re, flags=re.I)
_match = _pattern.search(_format)
if _match is not None:
n = int(_match.groups()[0])
_format = _pattern.sub(str(random.randrange(10**(n-1), 10**n)), _format)
_ext = self.getFileExt()
return '%s%s' % (_format, _ext)
def getFileInfo(self):
# 获取当前上传成功文件的各项信息
filename = re.sub(r'^/', '', self.fullName)
result = {
'state': self.stateInfo,
'url': os.path.join(" #website修改为站点的域名
'title': self.oriName,
'original': self.oriName,
'type': self.fileType,
'size': self.fileSize,
}
return result
配置完毕后重启django服务器就可以正常使用ueditor编辑器了