django项目中使用百度UEditor富文本编辑器

最新推荐文章于 2024-04-18 10:12:18 发布
最新推荐文章于 2024-04-18 10:12:18 发布
阅读量690 收藏 2
点赞数
分类专栏： Ueditor 文章标签： 编辑器 django python javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hotswwkyo/article/details/115377676
版权
获取UEditor

从 官网下载UEditor源码，下载的源码中并没有ueditor.all.js文件。需要使用grunt来把源码包打包成部署版本（含有ueditor.all.js 文件）

  1. 安装 node.js
  2. 全局安装grunt (npm install -g grunt-cli)
  3. 命令行切换目录到ueditor目录下（含有Gruntfile.js文件）
  4. npm install 安装依赖
  5. 执行命令grunt default，命令会将源码文件打包，同时会生成 ueditor.all.js 文件，执行完后会在 ueditor 目录下生成一个 dist 目录
  6. dist里面有个utf8-php目录，里面就是部署版本，修改重命名为ueditor
服务器需要处理的ueditor相关请求

把UEditor部署版本放到项目的static静态目录下，然后按照官网的说明在相关要使用的页面引入ueditor.config.js和ueditor.all.js文件，就可以使用UEditor的绝大部分功能。只有上传文件、图片、视频、在线图片、在线文件这一部分和上传有关系的部分不好用，因为这些功能需要后端服务器的支持才可以，所以需要在我们的django项目中实现响应的视图函数来处理这部分请求：

  1. 获取后端配置项信息请求（请求地址携带的参数为action=config）
  2. 上传图片请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=uploadimage）
  3. 上传视频请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=uploadvideo）
  4. 上传附件请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=uploadfile）
  5. 列出所有图片请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=listimage）
  6. 列出所有附件请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=listfile）
  7. 上传涂鸦图片请求（请求地址携带参数看后端配置项设置的具体值，默认为：action=uploadscrawl）
  8. 抓取远程图片（请求地址携带参数看后端配置项设置的具体值，默认为：action=catchimage）

上传图片、上传截图、上传视频、上传附件和上传涂鸦图片，后台服务器应返回的JSON格式数据如下：

{
    "state": "SUCCESS",                         // 状态信息，成功时返回值固定为SUCCESS
    "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/%E6%9C%80%E6%96%B0%E7%89%A9%E6%96%99%E5%8D%95ID%E6%98%BE%E7%A4%BA%E9%94%99%E8%AF%AF001.png",
    "title": "最新物料单ID显示错误001.png",      // 文件名称
    "original": "最新物料单ID显示错误001.png"    // 内部文件名，一般和titile相同
}

抓取远程图片，后台服务器应返回的JSON格式数据如下：

{
    "state": "SUCCESS",
    "list": [
        {
            "state": "SUCCESS",
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/sww.png",
            "size": 7200,
            "title": "sww.png",
            "original": "sww.png",
            "source": "http://seventest.cn/static/images/sww.png",  // 下载地址
        }
    ]
}

列出指定目录下的图片、列出指定目录下的文件，后台服务器应返回的JSON格式数据如下：

{
    "state": "SUCCESS",
    "list": [
        {
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/del_image_01.png"
        },
        {
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/image.png"
        },
        {
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/test_picture_002.gif"
        },
        {
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/%E6%9C%80%E6%96%B0%E7%89%A9%E6%96%99%E5%8D%95ID%E6%98%BE%E7%A4%BA%E9%94%99%E8%AF%AF001.png"
        },
        {
            "url": "/ueditor/2_%E5%B9%BF%E5%91%8A%E6%8E%92%E6%9C%9F%E5%B9%B3%E5%8F%B0/%E6%B6%82%E9%B8%A6.png"
        }
    ],
    "start": 0,
    "total": 5
}
django项目处理ueditor请求代码

以下是我开发的转测试流程管理系统中实现处理以上ueditor请求的相关代码

  • settings.py配置
    在这里插入图片描述

  • 项目路由配置(urls.py)

# -*- coding:utf-8 -*- ''' Created on 2019年12月15日

@author: siwenwei '''

from django.urls import re_path from . import views

urlpatterns = [
    re_path(r'^$', views.Index.as_view()),
    re_path(r'^login$', views.Login.as_view()),
    re_path(r'^logout$', views.Logout.as_view()),
    re_path(r'^userguide$', views.UserGuide.as_view()),
    re_path(r'^author$', views.Author.as_view()),
    re_path(r'^register$', views.Register.as_view()),
    re_path(r'^{}$'.format(views.Settings.suburl), views.Settings.as_view()),
    re_path(r'^{}$'.format(views.BaseData.suburl), views.BaseData.as_view()),
    re_path(r'^testproject/{}$'.format(views.Project.suburl), views.Project.as_view()),
    re_path(r'^user/list$', views.UserList.as_view()),
    re_path(r'^member/{}$'.format(views.Member.suburl), views.Member.as_view()),
    re_path(r'^flow/list$', views.FlowList.as_view()),
    re_path(r'^flow/{}$'.format(views.Flow.suburl), views.Flow.as_view()),
    re_path(r'^flow/node/list$', views.FlowNodes.as_view()),
    re_path(r'^flow/node/settings$', views.NodeSettings.as_view()),
    re_path(r'^flow/node/run$', views.NodeRunner.as_view()),
    re_path(r'^flow/node/file/{}$'.format(views.NodeFiles.suburl), views.NodeFiles.as_view()),
    re_path(r'^{}$'.format(views.UEditor.SERVER_URL['value']), views.UEditor.as_view()),  # 处理 ueditor 获取服务端配置 上传图片 上传附件 列出所有图片 列出所有附件 删除图片 删除附件等请求
    re_path(r'^{}/{}$'.format(views.UEditor.SERVER_URL['value'], views.Ueditor_FileServer.suburl), views.Ueditor_FileServer.as_view()),
# 处理ueditor 获取各种文件的请求，其实就是提供获取静态文件的服务 ]
  • 处理ueditor各种上传请求、图片列表、附件列表请求视图(ueditor.py)
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
'''
@Author: 思文伟
@Date: 2021/03/07 14:45:44
'''

import os
import json
import base64
from urllib.parse import quote
from urllib.parse import unquote
from urllib.request import urlopen

from django.views import View
from django.conf import settings
from django.http import HttpResponse
from django.http import JsonResponse
from django.http import HttpResponseBadRequest
from django.core.exceptions import ObjectDoesNotExist
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt
from django.http import QueryDict

from .. import models
from ..utils.filesize import FileSize
from ..utils.ueditor_path_formatter import UeditorPathFormatter


@method_decorator(csrf_exempt, name='dispatch')
class UEditor(View):

    ROOT_DIR = settings.UEDITOR_FILE_DIR
    SERVER_URL = {'key': 'serverUrl', 'value': 'ueditor', 'root_dir': ROOT_DIR}

    # 上传图片配置项
    IMAGE = {
        "imageActionName": "uploadimage",  # 执行上传图片的action名称
        "imageMaxSize": 20485760,  # 上传大小限制，单位B,10M
        "imageFieldName": "upfile",  # * 提交的图片表单名称
        "imageUrlPrefix": "",
        "imagePathFormat": "",
        "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],  # 上传图片格式显示
    }

    # 涂鸦图片上传配置项
    SCRAWL = {
        "scrawlActionName": "uploadscrawl",  # 执行上传涂鸦的action名称
        "scrawlFieldName": "upfile",  # 提交的图片表单名称
        "scrawlMaxSize": 10485760,  # 上传大小限制，单位B  10M
        "scrawlUrlPrefix": "",
        "scrawlPathFormat": "",
    }

    # 截图工具上传
    SNAPSCREEN = {
        "snapscreenActionName": "uploadimage",  # 执行上传截图的action名称
        "snapscreenPathFormat": "",
        "snapscreenUrlPrefix": "",
    }

    # 抓取远程图片配置
    CATCHER = {
        "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
        "catcherPathFormat": "",
        "catcherActionName": "catchimage",  # 执行抓取远程图片的action名称
        "catcherFieldName": "source",  # 提交的图片列表表单名称
        "catcherMaxSize": 10485760,  # 上传大小限制，单位B
        "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],  # 抓取图片格式显示
        "catcherUrlPrefix": "",
    }

    # 上传视频配置
    VIDEO = {
        "videoActionName": "uploadvideo",  # 执行上传视频的action名称
        "videoPathFormat": "",
        "videoFieldName": "upfile",  # 提交的视频表单名称
        "videoMaxSize": 102400000,  # 上传大小限制，单位B，默认100MB
        "videoUrlPrefix": "",
        "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],  # 上传视频格式显示
    }

    # 上传文件配置
    __FILE_ALLOW_FILES = [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar",
        ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ]
    FILE = {
        "fileActionName": "uploadfile",  # controller里,执行上传视频的action名称
        "filePathFormat": "",
        "fileFieldName": "upfile",  # 提交的文件表单名称
        "fileMaxSize": 204800000,  # 上传大小限制，单位B，200MB
        "fileUrlPrefix": "",  # 文件访问路径前缀
        "fileAllowFiles": __FILE_ALLOW_FILES,  # 上传文件格式显示
    }

    # 列出指定目录下的图片
    IMAGE_MANAGER = {
        "imageManagerActionName": "listimages",  # 执行图片管理的action名称
        "imageManagerListPath": "",
        "imageManagerListSize": 30,  # 每次列出文件数量
        # 列出的文件类型
        "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
        "imageManagerUrlPrefix": "",  # 图片访问路径前缀
    }

    # 列出指定目录下的文件
    __FILE_MANAGER_ALLOW_FILES = [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".tif", ".psd"
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml", ".exe", ".com", ".dll", ".msi"
    ]
    FILE_MANAGER = {
        "fileManagerActionName": "listfiles",  # 执行文件管理的action名称
        "fileManagerListPath": "",
        "fileManagerUrlPrefix": "",
        "fileManagerListSize": 30,  # 每次列出文件数量
        "fileManagerAllowFiles": __FILE_MANAGER_ALLOW_FILES  # 列出的文件类型
    }

    DEFAULT_MAX_SIZE = 20485760

    IMAGE_REMOVE = {"imageRemoveActionName": "removeimage"}
    FILE_REMOVE = {"fileRemoveActionName": "removefile"}
    SAVE_TO_SERVER = {"saveToServerActionName": "savecontent"}

    @property
    def upload_config(self):
        """返回给前端的上传配置项"""

        self.IMAGE.setdefault('imageActionName ', 'uploadimage')
        self.SCRAWL.setdefault("scrawlActionName", "uploadscrawl")
        self.SNAPSCREEN.setdefault("snapscreenActionName", "uploadimage")
        self.CATCHER.setdefault("catcherActionName", "catchimage")
        self.VIDEO.setdefault("videoActionName", "uploadvideo")
        self.FILE.setdefault("fileActionName", "uploadfile")
        self.IMAGE_MANAGER.setdefault("imageManagerActionName", "listimages")
        self.FILE_MANAGER.setdefault("fileManagerActionName", "listfiles")
        self.IMAGE_REMOVE.setdefault("imageRemoveActionName", "removeimage")
        self.FILE_REMOVE.setdefault("fileRemoveActionName", "removefile")
        self.SAVE_TO_SERVER.setdefault("saveToServerActionName", "savecontent")

        to_be_add_items = [self.IMAGE, self.SCRAWL, self.SNAPSCREEN, self.CATCHER]
        to_be_add_items.append(self.VIDEO)
        to_be_add_items.append(self.FILE)
        to_be_add_items.append(self.IMAGE_MANAGER)
        to_be_add_items.append(self.FILE_MANAGER)
        to_be_add_items.append(self.IMAGE_REMOVE)
        to_be_add_items.append(self.FILE_REMOVE)
        to_be_add_items.append(self.SAVE_TO_SERVER)
        items = {}
        for item in to_be_add_items:
            items.update(item)
        return items

    @property
    def action_views(self):
        """配置对应action的视图函数"""

        views = {
            'config': self.get_ueditor_config,
            self.upload_config.get('imageActionName '): self.general_upload_file,
            self.upload_config.get("scrawlActionName"): self.upload_scrawl,
            self.upload_config.get("snapscreenActionName"): self.general_upload_file,
            self.upload_config.get("catcherActionName"): self.catch_remote_image,
            self.upload_config.get("videoActionName"): self.general_upload_file,
            self.upload_config.get("fileActionName"): self.general_upload_file,
            self.upload_config.get("imageManagerActionName"): self.list_images,
            self.upload_config.get("fileManagerActionName"): self.list_files,
            self.upload_config.get("imageRemoveActionName"): self.remove_file,
            self.upload_config.get("fileRemoveActionName"): self.remove_file,
            self.upload_config.get("saveToServerActionName"): self.save_ueditor_content,
        }
        return views

    @staticmethod
    def to_json(obj):
        return json.dumps(obj, ensure_ascii=False)

    @staticmethod
    def get_or_post(request):

        if request.method.upper() == 'get'.upper():
            return request.GET
        elif request.method.upper() == 'post'.upper():
            parts = request.get_full_path().split('?')
            query_params = parts[1] if len(parts) > 1 else ''
            qd = QueryDict(query_params)
            final_post = request.POST.copy()
            final_post.update(qd.copy())
            return final_post
        else:
            return None

    def call_action_views(self, request, *args, **kwargs):

        params = self.get_or_post(request)
        action = params.get('action')
        action_view = self.action_views.get(action, None)
        if action_view:
            return action_view(request, *args, **kwargs)
        else:
            message = '没有为{}配置对应的视图函数'.format(action)
            return HttpResponseBadRequest(message)

    def create_full_file_path(self, subpath):
        """构建ueditor上传存放目录

        Args:
            subpath: 子路径

        """
        return os.path.join(self.ROOT_DIR, subpath)

    def get_ueditor_config(self, request, *args, **kwargs):
        """返回配置"""

        return HttpResponse(self.to_json(self.upload_config), content_type="application/javascript")

    def get(self, request, *args, **kwargs):
        """获取ueditor的后端URL地址"""

        return self.call_action_views(request, *args, **kwargs)

    def post(self, request, *args, **kwargs):
        """获取ueditor的后端URL地址"""

        return self.call_action_views(request, *args, **kwargs)

    def list_images(self, request, *args, **kwargs):

        params = self.get_or_post(request)
        allow_types_key = 'imageManagerAllowFiles'
        list_size_key = 'imageManagerListSize'
        list_path_key = 'imageManagerListPath'
        list_size = int(params.get('size', self.upload_config.get(list_size_key, 7)))
        list_start = int(params.get("start", 0))
        listpath = self.upload_config.get(list_path_key, '')
        allow_types = self.upload_config.get(allow_types_key, '')

        subdirs = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
        files = self.get_url_files(listpath, allow_types, listpath_dirs=subdirs)
        if (len(files) == 0):
            return_info = {"state": "未找到匹配文件！", "list": [], "start": list_start, "total": 0}
        else:
            return_info = {"state": "SUCCESS", "list": files[list_start:list_start + list_size], "start": list_start, "total": len(files)}
        print(json.dumps(return_info))
        return HttpResponse(json.dumps(return_info), content_type="application/javascript")

    def remove_file(self, request, *args, **kwargs):

        state = True
        msg = ''
        params = self.get_or_post(request)
        subdirs = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
        suburlpath = unquote(params.get('path', ''))
        parts = suburlpath.split('/')
        root_dir = self.SERVER_URL['root_dir']

        if parts:
            fpath = subdirs
            fpath.append(parts[-1])
            filepath = os.path.join(root_dir, *fpath)
            try:
                if os.path.isfile(filepath):
                    os.remove(filepath)
            except Exception as e:
                msg = str(e)
                state = False
        res = dict(state=state, msg=msg)
        dumps_params = dict(ensure_ascii=False)
        return JsonResponse(res, json_dumps_params=dumps_params)

    def list_files(self, request, *args, **kwargs):
        """列出文件"""

        params = self.get_or_post(request)
        allow_types_key = 'fileManagerAllowFiles'
        list_size_key = 'fileManagerListSize'
        list_path_key = 'fileManagerListPath'
        list_size = int(params.get('size', self.upload_config.get(list_size_key, 7)))
        list_start = int(params.get("start", 0))
        listpath = self.upload_config.get(list_path_key, '')
        allow_types = self.upload_config.get(allow_types_key, '')
        subdirs = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
        files = self.get_url_files(listpath, allow_types, listpath_dirs=subdirs)
        if (len(files) == 0):
            return_info = {"state": "未找到匹配文件！", "list": [], "start": list_start, "total": 0}
        else:
            return_info = {"state": "SUCCESS", "list": files[list_start:list_start + list_size], "start": list_start, "total": len(files)}
        return HttpResponse(json.dumps(return_info), content_type="application/javascript")

    def get_url_files(self, listpath, allow_types=[], listpath_dirs=[]):

        urlsep = '/'
        listpath_dirs.extend(listpath.split(urlsep))
        dirlist = listpath_dirs
        url_files = []
        root_dir = self.SERVER_URL['root_dir']
        rd_parts = root_dir.split(os.sep)
        plength = len(rd_parts)
        root_url = self.SERVER_URL['value']
        if dirlist:
            dirpath = os.path.join(root_dir, os.sep.join(dirlist))
            items = os.listdir(dirpath)
            for item in items:
                if os.path.isfile(os.path.join(dirpath, item)):
                    name, ext = os.path.splitext(item)
                    urlparts = dirpath.split(os.sep)
                    urlparts.append(item)
                    urlparts = urlparts[plength:]
                    urlparts.insert(0, root_url)
                    url = quote(urlsep.join(urlparts))
                    url = url if url.startswith(urlsep) else (urlsep + url)
                    if allow_types:
                        if ext in allow_types:
                            url_files.append({"url": url})
                    else:
                        url_files.append({"url": url})
        return url_files

    def catch_remote_image(self, request, *args, **kwargs):
        """远程抓图，当catchRemoteImageEnable:true时，如果前端插入图片地址与当前web不在同一个域，则由本函数从远程下载图片到本地
        """

        state = "SUCCESS"
        path_format_key = 'catcherPathFormat'
        params = self.get_or_post(request)
        allow_type = list(params.get("catcherAllowFiles", self.upload_config.get("catcherAllowFiles", "")))
        # max_size = int(params.get("catcherMaxSize", self.upload_config.get("catcherMaxSize", 0)))
        remote_urls = params.getlist(self.upload_config['catcherFieldName'], [])
        catcher_infos = []

        for remote_url in remote_urls:

            # 取得上传的文件的原始名称
            remote_file_name = os.path.basename(remote_url)
            remote_original_name, remote_original_ext = os.path.splitext(remote_file_name)

            # 文件类型检验
            if remote_original_ext in allow_type:
                path_format = params.get(path_format_key, self.upload_config.get(path_format_key, ''))
                formatter = UeditorPathFormatter()
                formatter.format(remote_original_name, path_format)
                subdirectories = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
                formatter.set_url_path_prefix(*subdirectories)  # 项目 流程 节点 构成的路径
                full_file_path = self.create_full_file_path(formatter.save_subpath)
                self._create_directory(full_file_path)

                # 读取远程图片文件
                try:
                    remote_image = urlopen(remote_url)
                    # 将抓取到的文件写入文件
                    try:
                        f = open(full_file_path, 'wb')
                        f.write(remote_image.read())
                        f.close()
                        state = "SUCCESS"
                    except Exception as E:
                        state = u"写入抓取图片文件错误:%s" % E.message
                except Exception as E:
                    state = u"抓取图片错误：%s" % E.message
                formatter.set_url_path_prefix(self.SERVER_URL['value'])  # 添加根路径
                catcher_infos.append({
                    "state": state,
                    "url": quote(formatter.url_path),
                    "size": os.path.getsize(full_file_path),
                    "title": os.path.basename(full_file_path),
                    "original": remote_file_name,
                    "source": remote_url
                })

        return_info = {"state": "SUCCESS" if len(catcher_infos) > 0 else "ERROR", "list": catcher_infos}
        return HttpResponse(json.dumps(return_info, ensure_ascii=False), content_type="application/javascript")

    @classmethod
    def get_db_object(cls, model_klass, **db_fields):

        obj = None
        try:
            obj = model_klass.objects.get(**db_fields)
        except ObjectDoesNotExist:
            obj = None
        return obj

    def _project_flow_node_dirname(self, project_id=None, flow_id=None, node_id=None, sep='_'):

        dirname_list = []
        if node_id:
            node = self.get_db_object(models.Node, id=node_id)
            dirname_list.append(sep.join([str(node.flow.project.id), node.flow.project.name]))
            dirname_list.append(sep.join([node.flow.number]))
            dirname_list.append(sep.join([node.name]))
        elif flow_id:
            flow = self.get_db_object(models.Flow, id=flow_id)
            dirname_list.append(sep.join([str(flow.project.id), flow.project.name]))
            dirname_list.append(sep.join([flow.number]))
        elif project_id:
            project = self.get_db_object(models.Project, id=project_id)
            dirname_list.append(sep.join([project_id, project.name]))
        else:
            pass
        return dirname_list

    def general_upload_file(self, request, *args, **kwargs):
        """上传文件"""

        state = "SUCCESS"
        params = self.get_or_post(request)
        action = params.get('action')
        if action == self.upload_config.get('imageActionName'):
            submit_field_key = 'imageFieldName'
            max_size_field = 'imageMaxSize'
            ext_field = 'imageAllowFiles'
            path_format_key = 'imagePathFormat'
        elif action == self.upload_config.get('fileActionName'):
            submit_field_key = 'fileFieldName'
            max_size_field = 'fileMaxSize'
            ext_field = 'fileAllowFiles'
            path_format_key = 'filePathFormat'
        elif action == self.upload_config.get('videoActionName'):
            submit_field_key = 'videoFieldName'
            max_size_field = 'videoMaxSize'
            ext_field = 'videoAllowFiles'
            path_format_key = 'videoPathFormat'
        else:
            return JsonResponse({'state': 'action传值错误'})

        submit_field_name = params.get(submit_field_key, self.upload_config.get(submit_field_key, 'upfile'))
        submit_file = request.FILES.get(submit_field_name, None)
        if submit_file is None:
            return JsonResponse({'state': '未上传任何文件'})
        submit_file_name = submit_file.name
        submit_file_size = submit_file.size
        submit_file_ext = os.path.splitext(submit_file_name)[1]
        support_file_exts = list(params.get(ext_field, self.upload_config.get(ext_field, "")))
        if submit_file_ext not in support_file_exts:
            state = "服务器只支持以下类型的文件：{}，实际上传的是：{}".format(' | '.join(support_file_exts), submit_file_name)
            return JsonResponse({'state': state})
        limit_size = int(params.get(max_size_field, self.upload_config.get(max_size_field, self.DEFAULT_MAX_SIZE)))
        asize = FileSize(submit_file_size)
        lsize = FileSize(limit_size)
        if asize > lsize:
            state = "上传文件大小({})已超过最大限制({})%s。".format(asize.human_readable, lsize.human_readable)
            return JsonResponse({'state': state})
        path_format = params.get(path_format_key, self.upload_config.get(path_format_key, ''))
        formatter = UeditorPathFormatter()
        formatter.format(submit_file_name, path_format)
        subdirectories = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
        formatter.set_url_path_prefix(*subdirectories)  # 项目 流程 节点 构成的路径
        full_file_path = self.create_full_file_path(formatter.save_subpath)
        try:
            self._create_directory(full_file_path)
            with open(full_file_path, 'wb') as f:
                for chunk in submit_file.chunks():
                    f.write(chunk)
        except Exception as e:
            state = "保存文件{}错误: {}".format(submit_file_name, str(e))
        formatter.set_url_path_prefix(self.SERVER_URL['value'])  # 添加根路径
        res = dict(state=state, url=quote(formatter.url_path), title=submit_file_name, original=submit_file_name)
        dumps_params = dict(ensure_ascii=False)
        return JsonResponse(res, json_dumps_params=dumps_params)

    def _create_directory(self, path):

        target_dir = os.path.dirname(path)
        if not os.path.exists(target_dir):
            os.makedirs(target_dir)

    def upload_scrawl(self, request, *args, **kwargs):
        """上传涂鸦"""

        state = "SUCCESS"
        sfn = 'scrawlFieldName'
        max_size_field = 'scrawlMaxSize'
        scrawl_file_name = kwargs.get('scrawl_file_name', '涂鸦.png')
        params = self.get_or_post(request)
        field_name = params.get(sfn, self.upload_config.get(sfn, 'upfile'))
        base64_content = params.get(field_name)
        content = base64.b64decode(base64_content)
        actual_size = len(content)
        limit_size = int(params.get(max_size_field, self.upload_config.get(max_size_field, 0)))
        asize = FileSize(actual_size)
        lsize = FileSize(limit_size)
        if asize > lsize:
            state = "上传文件大小({})已超过最大限制({})%s。".format(asize.human_readable, lsize.human_readable)
            return JsonResponse({'state': state})
        path_format = params.get('scrawlPathFormat', self.upload_config.get('scrawlPathFormat', ''))
        formatter = UeditorPathFormatter()
        formatter.format(scrawl_file_name, path_format)
        subdirectories = self._project_flow_node_dirname(params.get('project_id', ''), params.get('flow_pk', ''), params.get('node_id', ''))
        formatter.set_url_path_prefix(*subdirectories)  # 项目 流程 节点 构成的路径
        full_file_path = self.create_full_file_path(formatter.save_subpath)
        try:
            self._create_directory(full_file_path)
            with open(full_file_path, 'wb') as f:
                f.write(content)
        except Exception as e:
            state = "写入图片文件错误: {}".format(str(e))
        formatter.set_url_path_prefix(self.SERVER_URL['value'])  # 添加根路径
        res = dict(state=state, url=quote(formatter.url_path), title=scrawl_file_name, original=scrawl_file_name)
        dumps_params = dict(ensure_ascii=False)
        return JsonResponse(res, json_dumps_params=dumps_params)

    def save_ueditor_content(self, request, *args, **kwargs):

        state = True
        msg = ""
        submit_datas = self.get_or_post(request)
        project_id = submit_datas.get('project_id', '')
        flow_id = submit_datas.get('flow_pk', '')
        node_id = submit_datas.get('node_id', '')
        ueditor_content = submit_datas.get("ueditor_content")
        node = self.get_db_object(models.Node, id=node_id)
        if node:
            if node.is_review_kind or node.is_env_kind or node.is_test_kind:
                r = self.get_db_object(models.Result, node=node, batch=node.batch)
                if r:
                    r.doc = ueditor_content
                    r.save()
                else:
                    code, name = (-1, "还没有结果")
                    nr = models.Result(code=code, name=name, node=node, batch=node.batch, creator=request.user, doc=ueditor_content)
                    nr.save()
            else:
                state = False
                msg = "节点({})不支持".format(node.name)
        else:
            flow = self.get_db_object(models.Flow, id=flow_id)
            if flow:
                flow.doc = ueditor_content
                flow.save()
            else:
                project = self.get_db_object(models.Project, id=project_id)
                if project:
                    project.doc = ueditor_content
                    project.save()
                else:
                    state = False
                    # 项目 流程 节点 任意一个都找不到，不知道保存到哪
                    msg = "error code: p{}f{}n{}".format(project_id, flow_id, node_id)
        res = dict(state=state, msg=msg)
        dumps_params = dict(ensure_ascii=False)
        return JsonResponse(res, json_dumps_params=dumps_params)
  • 提供ueditor获取静态文件的服务视图(ueditor_fileserver.py)
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
'''
@Author: 思文伟
@Date: 2021/03/07 14:47:32
'''

from django.views import View
from django.conf import settings
from django.views import static
from django.http import HttpResponseRedirect
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt


@method_decorator(csrf_exempt, name='dispatch')
class Ueditor_FileServer(View):

    suburl_group_name = 'suburl'
    suburl = '(?P<{}>.+)'.format(suburl_group_name)
    redirect_url = "/login"

    @property
    def ueditor_file_dir(self):

        return settings.UEDITOR_FILE_DIR

    def download(self, request, *args, **kwargs):

        if not request.user.is_authenticated:
            return HttpResponseRedirect(self.redirect_url)
        sub_url = kwargs.get(self.suburl_group_name)
        document_root = self.ueditor_file_dir
        path = sub_url
        res = static.serve(request, path, document_root=document_root)
        return res

    def get(self, request, *args, **kwargs):

        return self.download(request, *args, **kwargs)

    def post(self, request, *args, **kwargs):

        return self.download(request, *args, **kwargs)
  • 处理文件大小(filesize.py)
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
'''
@Author: 思文伟
@Date: 2021/03/07 14:48:18
'''


class FileSize():
    SIZE_UNIT = {"Byte": 1, "KB": 1024, "MB": 1048576, "GB": 1073741824, "TB": 1099511627776}

    def __init__(self, size):
        self.size = int(FileSize.Format(size))

    @staticmethod
    def Format(size):
        import re
        if isinstance(size, int):
            return size
        else:
            if not isinstance(size, str):
                return 0
            else:
                oSize = size.lstrip().upper().replace(" ", "")
                pattern = re.compile(r"(\d*\.?(?=\d)\d*)(byte|kb|mb|gb|tb)", re.I)
                match = pattern.match(oSize)
                if match:
                    m_size, m_unit = match.groups()
                    if m_size.find(".") == -1:
                        m_size = int(m_size)
                    else:
                        m_size = float(m_size)
                    if m_unit != "BYTE":
                        return m_size * FileSize.SIZE_UNIT[m_unit]
                    else:
                        return m_size
                else:
                    return 0

    # 返回字节为单位的值
    @property
    def size(self):
        return self._size

    @size.setter
    def size(self, newsize):
        try:
            self._size = int(newsize)
        except Exception:
            self._size = 0

    # 返回带单位的自动值
    @property
    def human_readable(self):
        if self.size < FileSize.SIZE_UNIT["KB"]:
            unit = "Byte"
        elif self.size < FileSize.SIZE_UNIT["MB"]:
            unit = "KB"
        elif self.size < FileSize.SIZE_UNIT["GB"]:
            unit = "MB"
        elif self.size < FileSize.SIZE_UNIT["TB"]:
            unit = "GB"
        else:
            unit = "TB"

        if (self.size % FileSize.SIZE_UNIT[unit]) == 0:
            return "%s%s" % ((self.size / FileSize.SIZE_UNIT[unit]), unit)
        else:
            return "%0.2f%s" % (round(float(self.size) / float(FileSize.SIZE_UNIT[unit]), 2), unit)

    def __str__(self):
        return self.human_readable

    # 相加
    def __add__(self, other):
        if isinstance(other, FileSize):
            return FileSize(other.size + self.size)
        else:
            return FileSize(FileSize(other).size + self.size)

    def __sub__(self, other):
        if isinstance(other, FileSize):
            return FileSize(self.size - other.size)
        else:
            return FileSize(self.size - FileSize(other).size)

    def __gt__(self, other):
        if isinstance(other, FileSize):
            if self.size > other.size:
                return True
            else:
                return False
        else:
            if self.size > FileSize(other).size:
                return True
            else:
                return False

    def __lt__(self, other):
        if isinstance(other, FileSize):
            if other.size > self.size:
                return True
            else:
                return False
        else:
            if FileSize(other).size > self.size:
                return True
            else:
                return False

    def __ge__(self, other):
        if isinstance(other, FileSize):
            if self.size >= other.size:
                return True
            else:
                return False
        else:
            if self.size >= FileSize(other).size:
                return True
            else:
                return False

    def __le__(self, other):
        if isinstance(other, FileSize):
            if other.size >= self.size:
                return True
            else:
                return False
        else:
            if FileSize(other).size >= self.size:
                return True
            else:
                return False
  • 处理ueditor中的PathFormat相关项(ueditor_path_formatter.py)
    在这里插入图片描述
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
'''
@Author: 思文伟
@Date: 2021/03/07 14:39:03
'''

import re
import os
import random
import datetime


class UeditorPathFormatter(object):
    def __init__(self, url_path_sep='/'):

        self.url_path_sep = url_path_sep
        self.url_path_prefix = None
        self.url_path = None

    def _replace(self, file_name, rand_prefix='rand:', dtime=datetime.datetime.now()):
        def wrapper(match_obj):

            ms = match_obj.group(0)
            if ms == '{filename}':
                repl = file_name
            elif ms == '{time}':
                repl = str(int(dtime.timestamp()))
            elif ms == '{yyyy}':
                repl = dtime.strftime('%Y')
            elif ms == '{yy}':
                repl = dtime.strftime('%y')
            elif ms == '{mm}':
                repl = dtime.strftime('%m')
            elif ms == '{dd}':
                repl = dtime.strftime('%d')
            elif ms == '{hh}':
                repl = dtime.strftime('%H')
            elif ms == '{ii}':
                repl = dtime.strftime('%M')
            elif ms == '{ss}':  # datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S.%f') # 含微秒的日期时间
                repl = dtime.strftime('%S')
            else:
                ms_content = ms.lstrip("{").rstrip("}")
                if ms_content.startswith(rand_prefix):
                    length = int(ms_content[len(rand_prefix):])
                    number = random.randint(1, int('9' * length))
                    fmt = '{:>0%sd}' % length
                    repl = fmt.format(number)
                else:
                    repl = ms
            return repl

        return wrapper

    def _check_path_format(self, path_format):

        pass

    def _check_file_name(self, file_name):

        pass

    def format(self, file_name, path_format, endswith_filename=True):
        """

        # {filename}  # 会替换成文件名 [要注意中文文件乱码问题]
        # {rand:6}    # 会替换成随机数,后面的数字是随机数的位数
        # {time}      # 会替换成时间戳
        # {yyyy}      # 会替换成四位年份
        # {yy}        # 会替换成两位年份
        # {mm}        # 会替换成两位月份
        # {dd}        # 会替换成两位日期
        # {hh}        # 会替换成两位小时
        # {ii}        # 会替换成两位分钟
        # {ss}        # 会替换成两位秒

        Args:
            file_name: 文件名（含拓展名） eg: index.html
            path_format: ueditor 相关项的PathFormat 参见 http://fex.baidu.com/ueditor/#server-path
            endswith_filename: 控制path_format 不是以文件名结尾的话是否自动附加文件名结尾， True - 附加
        """

        self.reset()
        parts = [
            "\\{filename\\}",
            "\\{rand:\\d+\\}",
            "\\{time\\}",
            "\\{yyyy\\}",
            "\\{yy\\}",
            "\\{mm\\}",
            "\\{dd\\}",
            "\\{hh\\}",
            "\\{ii\\}",
            "\\{ss\\}",
        ]
        file_name_fmt = '{filename}'
        regex = '(' + '|'.join(parts) + ')'
        matcher = re.compile(regex)
        if endswith_filename and not path_format.endswith(file_name_fmt):
            path_format = '/'.join([path_format, file_name_fmt])
        self.url_path = matcher.sub(self._replace(file_name), path_format)
        return self.url_path

    @property
    def save_subpath(self):

        try:
            p = self.url_path
        except AttributeError:
            raise AttributeError('Please call format method before calling save_subpath.')
        parts = p.split(self.url_path_sep)
        return os.path.join('', *parts)

    def set_url_path_prefix(self, *directories):

        self.url_path_prefix = self.url_path_sep.join(directories)
        if not self.url_path_prefix.startswith(self.url_path_sep):
            self.url_path_prefix = self.url_path_sep + self.url_path_prefix
        if self.url_path.startswith(self.url_path_sep):
            self.url_path = self.url_path_prefix + self.url_path
        else:
            self.url_path = self.url_path_prefix + self.url_path.lstrip(self.url_path_sep)

    def reset(self):

        self.url_path_prefix = None
        self.url_path = None


if __name__ == '__main__':
    formatter = UeditorPathFormatter()
    formatter.format('index.html', "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}/{rand:11}/{filename}")
    print(formatter.url_path)
    print(formatter.save_subpath)
体验地址

http://116.63.153.101:8005/
在这里插入图片描述

hotswwkyo
关注
专栏目录
DjangoUeditor
qq_41747979的博客
04-04 469
ueditor属于百度的一个编辑器，看起来挺好用的，类似于word的操作面板，但功能肯定没有那么全的。 下面说一下怎么把这一编辑器加到我们的django项目中（GitHub地址） 现在github上已经更新到python3，但对django2.1支持好像不太好，所以不建议直接pip安装到库里边，这里我们可以直接拿到源码当成一个应用来加到你的项目中，作修改也方便很多。 git clone https...
Django中使用Ueditor实现富文本
PY123456PY123456的博客
06-23 564
第一步，将DjangoUeditor3-2.0复制到项目中第二步 安装后，可以在External Libraries中的下的site-packages下看到DjangoUeditor首先在settings.py中注册'DjangoUeditor'Ueditor是继承于FileField这个方法的，因此在settings.py中还是要向上传图片那样配置media: models.py: 要将下图所示路径的boundfield.py中的第103行代码注释掉，否则会报错 进图D...
使用DjangoUeditor将Ueditor移植到Django（BAE环境下）
weixin_34152820的博客
02-08 114
UEditor是百度出品的开源富文本编辑器，BSD协议，外观、功能都不错。 DjangoUeditor是UEditor在Django上的移植版 项目地址https://github.com/zhangfisher/DjangoUeditor 由于UEditor没有出python版本，所以DjangoUeditor几乎是最简便的现成工具，但是要将DjangoUedtor移植到BAE上，还需要做...
Django使用Djangoueditor富文本编辑器
Mr_Sunqq的博客
04-22 4704
Django使用Djangoueditor富文本编辑器——————————————————————————————————————第一步：- 下载Djangoueditor压缩包，将包解压放到项目目录文件夹下- 下载地址：https://github.com/zhangfisher/DjangoUeditor第二步：- Python安装DjangoUeditor： pip install Djan...
Django 使用UEditor
byteway的专栏
04-17 3183
Django 使用UEditor(开源，功能强大)
djangoUeditor
08-25
满足python3的DjangoUeditor富文本编辑器，共享，互换资源！
Django集成百度富文本编辑器uEditor攻略
01-20
这里不介绍uEditor的使用方法，也不过多解释uEditor的配置方法，官网上都有详细的文档和API介绍，下载的Demo中也有常用的方法的示例代码，这里主要介绍uEditor和django集成需要修改的地方。 这里下载任意一个版本的...
使用 Django Ueditor 富文本编辑器
haifeng10001的博客
03-28 952
阅读本文需要你对Django项目的创建和基本使用有一定的了解 一、快速使用 1、安装 在项目根目录下克隆项目后再安装： git clone https://github.com/twz915/DjangoUeditor3.git cd DjangoUeditor3 python setup.py install 不要用pip install DjangoUeditor命令安装，因为现在（2...
Django框架使用富文本编辑器Uedit的方法分析
01-20
Uedit是由百度开发的一款功能强大的富文本编辑器，提供了多种编辑功能，如字体样式、图片上传、链接插入等。本文将详细介绍如何在Django项目中安装并配置Uedit。 首先，你需要安装DjangoUeditor，这是一个专门用于...
django富文本编辑器的实现示例
09-19
如果项目中使用了Xadmin作为后台管理系统，还可以在Xadmin中配置富文本编辑器的样式。 ```python # 在该模块的xadmin.py中配置 style_fields = {"detail": "ueditor"} ``` 这样，在Xadmin的表单中就会自动加载富...
DjangoUeditor:使用DjangoUeditor在django中进行富文本开发demo
06-16
DjangoUeditor 使用DjangoUeditor在django中进行富文本开发demo
DjangoUeditor本人完美修改版(支持Python2.x和Python3.X)
08-08
下载DjangoUeditor，发现不支持Python3.x,经过修改，在Python2.X(测试环境为Python2.6.6 + django-1.6.5 和Python2.7.8 + django-1.6.5)和Python3.X(测试环境为Python3.4.1 + django-1.6.5)下完美支持
DjangoUeditor项目的集成
辉
02-24 1009
DjangoUeditor这个项目,出品人已经不再提供维护支持。        最近在一个使用到aliyun oss的项目里集成了一次这个东西，当然我之前在普通文件上传的北京下已经集成过很多次了。        主要修改的东西就是在哪个文件上传函数里面，最方便的改法就是文件上传存储相关的操作全部用Django的default_storage替代，主要是两个函数式一个save，一个url函数。这
ueditor在Django中的使用
qq_42092076的博客
04-27 435
在修改models.py中的字段后，需要进行数据库的迁移 #urls.py path('ueditor/',include('DjangoUeditor.urls' )), #adminx.py class QuestionAdmin(object): #可以显示的列 list_display=["subject","statments","op_A","op_B","op_C","o...
探索DjangoUeditor：为你的 Django 项目注入强大的富文本编辑器
最新发布
gitblog_00024的博客
04-18 632
探索DjangoUeditor：为你的 Django 项目注入强大的富文本编辑器 项目地址:https://gitcode.com/zhangfisher/DjangoUeditor 本文将向你介绍一个名为DjangoUeditor的开源项目，这是一个专为Django框架打造的优图（UEditor）集成解决方案。如果你在构建Web应用时需要一个强大、易用且功能丰富的富文本编辑器，那么DjangoU...
Django-DjangoUeditor
weixin_30781631的博客
11-23 283
项目中用到了富文本编辑器DjangoUeditor，便开始学习。还有一个轻量级的编辑器是TinyHTML Editor，这个也可以，大家可以去了解一下。不过今天在这里主要说一下DjangoUeditor。 Ueditor是百度开源的Web编辑器，可以感受一下百度的Web编辑器： http://ueditor.baidu.com/website/umeditor.html DjangoUedi...
django html文本编辑器,django实现百度富文本编辑器
weixin_30453491的博客
06-24 331
首先，我们这里不是在admin里面集成百度富文本编辑器，如果是得话，请自行下载django第三方插件DjangoUeditor即可实现，我们这里探讨在html页面集成百度富文本编辑器；一：下载百度富文本编辑器：百度富文本编辑器，然后按照文档集成，你会发现无法上传文件或者图片二：后台上传配置(本文主要讲解后台上传配置)1：新建app名称ueditor，修改后台统一接口：找到ueditor.confi...
django2集成DjangoUeditor富文本编辑器
weixin_33939380的博客
04-20 251
富文本编辑器，在web开发中可以说是不可缺少的。django并没有自带富文本编辑器，因此我们需要自己集成，在这里推荐大家使用DjangoUeditor，因为DjangoUeditor封装了我们需要的一些功能如文件上传、在后台和前台一起使用等，非常方便。 一、下载DjangoUeditor: 1.python3:https:...
Django中使用富文本编辑器：Ueditor 详解
weixin_43619146的博客
09-01 665
1.安装Ueditor包 pip install DjangoUeditor 2.配置settings.py 加入app INSTALLED_APPS = [ 'django.contrib.admin', ... 'DjangoUeditor', ] 配置富文本编辑器的文件存放路径 MEDIA_URL ='/media/' MEDIA_ROOT = os.path.j...
Django项目集成与配置Ueditor富文本编辑器
在视图（View）和模板（Template）中，你需要按照Django的常规方式处理这个模型，例如在表单中使用`ModelForm`，在模板中渲染编辑器，以及在视图中处理POST请求，保存富文本内容到数据库。 集成Django和Ueditor可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值