Django实战-信息资讯-UEditor富文本编辑器

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 中

原文发布于微信公众号 - 数据云团(SmartData)

原文发表时间:2019-06-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券