首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django实战-信息资讯-UEditor富文本编辑器

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

作者头像
小团子
发布2019-07-18 16:38:34
6750
发布2019-07-18 16:38:34
举报
文章被收录于专栏:数据云团数据云团

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 中

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 数据云团 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档