Django网络应用开发的5项基础核心技术包括模型(Model)的设计,URL 的设计与配置,View(视图)的编写,Template(模板)的设计和Form(表单)的使用。
在本次项目使用 UEditor 富文本编辑器作为新闻编辑和修改的工具。在使用之前,需要注意几点,第一,下载 UEditor 富文本编辑器 的文件包,解压放置在 Django 项目的 static 静态资源文件目录中;第二,在项目 settings.py 文件中配置 UEditor 的文件路径;第三,实现 UEditor 前后端的资源文件传输与保存。
① UEditor 文件下载与配置路径
settings.py 文件中配置 UEditor 的文件路径
# UEditor 相关的配置
UEDITOR_UPLOAD_TO_SERVER = True
# 上传到 media 文件夹中
UEDITOR_UPLOAD_PATH = MEDIA_ROOT
# 配置富文本编辑器的文件路径
UEDITOR_CONFIG_PATH = os.path.join(BASE_DIR, 'static', 'ueditor', 'config.json')
② 实现 UEditor 前后端
需要在项目中新建 ueditor 应用
文件上传到本地服务器,还是七牛云的对象存储
# 安装 七牛云 的 Python SDK
pip install qiniu
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.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
@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 _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
③ UEditor 前端使用
需要先引入 UEditor 的 js
将富文本集成到 script 中