django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成
百度富文本编辑器官网地址：http://fex.baidu.com/ueditor/
疑问：为什么要二次集成？
答案：因为百度富文本编辑器Ueditor没有对python的支持
步骤1：
在官网下载Ueditor的任意版本代码：http://ueditor.baidu.com/website/download.html#ueditor
步骤2：
将下载的代码放入到 django 项目中
步骤3：前端引用
在前端HTML代码中引用富文本编辑器【注意：此时因为还没有实例化富文本编辑器，所以暂时无效果！！！】
<!-- 引用对应的js文件 --> <script type="text/javascript" charset="utf-8" src="{% static 'xxx/xxx/ueditor.config.js' %}"></script> <script type="text/javascript" charset="utf-8" src="{% static 'xxx/xxx/ueditor.all.min.js' %}"></script> <!-- 富文本编辑器 --> <div> <script id="uedit" type="text/plain></script> </div>
步骤6：js代码
在前端引用之后，使用js实例化Ueditor，并且配置一些参数：
// 富文本编辑器处理方法 News.prototype.listenEditor = function () { // 实例化一个富文本编辑器 window.ue = UE.getEditor('editor', { 'initialFrameHeight': 400,//设置富文本编辑器的高度 //'serverUrl': '/ueditor/upload/', //设置文件上传的视图函数（服务器路径） /* * initialFrameWidth:"100%"：设置富文本 编辑器自适应宽度 * 也可以在：ueditor.config.js中修改initialFrameWidth 达到同样的目的 */ initialFrameWidth:"100%" }); };
步骤6：军事机密，django + python服务端的集成处理（直接复制就可以用了）
1> views.py 中逻辑代码，还需要在settings进行对应的配置
# encoding: utf-8 """ 百度富文本编辑器python版本服务端集成代码 """ import json import re import string import time import hashlib import random import base64 import sys import os from urllib import parse # from django.conf import settings from django.conf import settings from django.http import JsonResponse from django.shortcuts import reverse from django.views.decorators.csrf import csrf_exempt from django.http import FileResponse from django.views.generic import View from django.utils.decorators import method_decorator from django.views.decorators.http import require_http_methods # 更改工作目录。这么做的目的是七牛qiniu的sdk # 在设置缓存路径的时候默认会设置到C:/Windows/System32下面 # 会造成没有权限创建。 # os.chdir(os.path.dirname(__file__)) # 这个在我的项目中设置后，服务器启动回报：manage.py 文件不存在，注释后一切正常 try: import qiniu except: raise RuntimeError("3333333333") # pass from io import BytesIO # 七牛相关配置 UEDITOR_QINIU_ACCESS_KEY = "" UEDITOR_QINIU_SECRET_KEY = "" UEDITOR_QINIU_BUCKET_NAME = "" UEDITOR_QINIU_DOMAIN = "" # ueditor 富文本编辑器的 config.json 配置文件路径 UEDITOR_CONFIG_PATH = "" # 配置文件上传路径 UEDITOR_UPLOAD_PATH = "" # 是否要将文件上传到七牛 UEDITOR_UPLOAD_TO_QINIU = False # 是否要将文件上传到自己的服务器 UEDITOR_UPLOAD_TO_SERVER = False # 用来判断是否要将文件上传到自己的服务器 try: UEDITOR_UPLOAD_TO_SERVER = settings.UEDITOR_UPLOAD_TO_SERVER if UEDITOR_UPLOAD_TO_SERVER: UEDITOR_UPLOAD_PATH = settings.UEDITOR_UPLOAD_PATH if not os.path.exists(UEDITOR_UPLOAD_PATH): os.mkdir(UEDITOR_UPLOAD_PATH) except Exception as e: os.chdir(os.path.join('..', '..', os.path.dirname(__file__))) raise RuntimeError("123"+os.getcwd()) # pass # 用来判断是否要将文件上传到七牛 try: UEDITOR_UPLOAD_TO_QINIU = settings.UEDITOR_UPLOAD_TO_QINIU except: raise RuntimeError("1111111111111111") # pass # 如果既没有配置上传到本地，又没有配置上传到七牛，那么就抛出异常 if not UEDITOR_UPLOAD_PATH and not UEDITOR_UPLOAD_TO_QINIU: raise RuntimeError("UEditor的UEDITOR_UPLOAD_TO_SERVER或者UEDITOR_UPLOAD_TO_QINIU必须配置一项！") # 判断是否配置了config.json文件的路径 try: UEDITOR_CONFIG_PATH = settings.UEDITOR_CONFIG_PATH except: raise RuntimeError("请配置UEditor的配置文件的路径！") # 如果配置了七牛的配置信息 if UEDITOR_UPLOAD_TO_QINIU: try: UEDITOR_QINIU_ACCESS_KEY = settings.UEDITOR_QINIU_ACCESS_KEY UEDITOR_QINIU_SECRET_KEY = settings.UEDITOR_QINIU_SECRET_KEY UEDITOR_QINIU_BUCKET_NAME = settings.UEDITOR_QINIU_BUCKET_NAME UEDITOR_QINIU_DOMAIN = settings.UEDITOR_QINIU_DOMAIN except Exception as e: option = e.args[0] raise RuntimeError('请在app.config中配置%s！' % option) # # @method_decorator(decorator,name=''):将函数装饰器转换为类装饰器 # @csrf_exempt：csrftoken装饰器 # @require_http_methods(['GET','POST']):请求装饰器，只允许 get 、 post 请求 # @method_decorator([csrf_exempt, require_http_methods(['GET', 'POST'])], name='dispatch') class UploadView(View): # 构造函数 def __init__(self): super(UploadView, self).__init__() def _random_filename(self, rawfilename): """ 随机的文件名，保证文件名称不会冲突 """ letters = string.ascii_letters random_filename = str(time.time()) + "".join(random.sample(letters, 5)) filename = hashlib.md5(random_filename.encode('utf-8')).hexdigest() subffix = os.path.splitext(rawfilename)[-1] return filename + subffix def _json_result(self, state='', url='', title='', original=''): """ 返回指定格式的json数据的 """ result = { 'state': state, 'url': url, 'title': title, 'original': original } return JsonResponse(result) def _upload_to_qiniu(self, upfile, filename): """ 上传文件到七牛 """ if not sys.modules.get('qiniu'): raise RuntimeError('没有导入qiniu模块！') q = qiniu.Auth(UEDITOR_QINIU_ACCESS_KEY, UEDITOR_QINIU_SECRET_KEY) token = q.upload_token(UEDITOR_QINIU_BUCKET_NAME) buffer = BytesIO() for chunk in upfile.chunks(): buffer.write(chunk) buffer.seek(0) ret, info = qiniu.put_data(token, filename, buffer.read()) if info.ok: url = parse.urljoin(UEDITOR_QINIU_DOMAIN, ret['key']) return 'SUCCESS', url, ret['key'], ret['key'] else: return 'FAIL', None, None, None def _upload_to_server(self, upfile, filename): """ 上传文件到自己的服务器 """ with open(os.path.join(UEDITOR_UPLOAD_PATH, filename), 'wb') as fp: for chunk in upfile.chunks(): fp.write(chunk) url = reverse("ueditor:send_file", kwargs={"filename": filename}) return 'SUCCESS', url, filename, filename def _action_config(self): """ 处理configl类型的响应 将配置文件以 json 格式返回给前端 """ config_path = UEDITOR_CONFIG_PATH with open(config_path, 'r', encoding='utf-8') as fp: result = json.loads(re.sub(r'\/\*.*\*\/', '', fp.read())) return JsonResponse(result) def _action_upload(self, request): """ 处理文件（图片，视频，普通文件）上传 """ upfile = request.FILES.get("upfile") filename = self._random_filename(upfile.name) qiniu_result = None server_result = None if UEDITOR_UPLOAD_TO_QINIU: qiniu_result = self._upload_to_qiniu(upfile, filename) if UEDITOR_UPLOAD_TO_SERVER: server_result = self._upload_to_server(upfile, filename) if qiniu_result and qiniu_result[0] == 'SUCCESS': return self._json_result(*qiniu_result) elif server_result and server_result[0] == 'SUCCESS': return self._json_result(*server_result) else: return self._json_result() def _action_scrawl(self, request): base64data = request.form.get("upfile") img = base64.b64decode(base64data) filename = self._random_filename('xx.png') with open(os.path.join(UEDITOR_UPLOAD_PATH, filename), 'wb') as fp: fp.write(img) url = reverse('ueditor:send_file', kwargs={"filename": filename}) return self._json_result('SUCCESS', url, filename, filename) # 类视图入口函数 # 当请求该类视图时，会优先执行此函数 # activate：文件类型 def dispatch(self, request, *args, **kwargs): super(UploadView, self).dispatch(request, *args, **kwargs) action = request.GET.get('action') if action == 'config': return self._action_config() elif action in ['uploadimage', 'uploadvideo', 'uploadfile']: return self._action_upload(request) elif action == 'uploadscrawl': return self._action_scrawl(request) else: return self._json_result() def send_file(request, filename): fp = open(os.path.join(UEDITOR_UPLOAD_PATH, filename), 'rb') response = FileResponse(fp) response['Content-Type'] = "application/octet-stream" return response
2> settings.py 中的配置
# """ # 百度UEditor富文本编辑配置 # """ # 是否要将文件上传到七牛（必须） UEDITOR_UPLOAD_TO_QINIU = True # 是否要将文件上传到自己的服务器(必须) UEDITOR_UPLOAD_TO_SERVER = False # 七牛相关配置（UEDITOR_UPLOAD_TO_QINIU:True:则必须进行配置，否则无须配置） UEDITOR_QINIU_ACCESS_KEY = "自己的ACCESS_KEY" UEDITOR_QINIU_SECRET_KEY = "自己的SECRET_KEY " UEDITOR_QINIU_BUCKET_NAME = "对象存储空间名称" # 域名 http://域名/ UEDITOR_QINIU_DOMAIN = "http://域名/" # config.json 配置文件路径 # php版本的Ueditor config.json 路径为：ueditor\utf8-php\php\config.json UEDITOR_CONFIG_PATH = os.path.join(BASE_DIR, 'front', 'dist', 'ueditor', 'utf8-php', 'php', 'config.json') # 配置文件上传路径（UEDITOR_UPLOAD_TO_SERVER:True：则必须进行配置，否则无须配置） # UEDITOR_UPLOAD_PATH = MEDIA_ROOT
