summernote富文本编辑器，由于网上的基本都是在说用这个编辑器上传图片的，所以我就整理了一下上传图片和文本的代码，完整前后端。

这里我准备了一个demo，需要的可以直接复制

Summernote

这是富文本编辑器的效果图
在这里插入图片描述
下面附上js代码，包括提交图片和文本

{% csrf_token %} 提交

接下里是Django后端的接收代码

from django.shortcuts import render,redirect,HttpResponse
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exemp

@login_required
@csrf_exempt
def text(request):
# 获取富文本编辑器中的数据
if request.method == “POST”:
title = request.POST.get(‘title’)
print(title)
content = request.POST.get(‘content’)
print(content)
return render(request,‘index.html’)

上传图片

@login_required
@csrf_exempt
def instantuploa(request):
if request.method == ‘POST’:
# 拿到图片对象
content_img = request.FILES[‘file’]
# 判断图片大小
if content_img.size/1024/1024 < 2:
# 判断图片格式是否为规定的格式
if content_img.content_type == ‘image/jpeg’ or content_img.content_type == ‘image/jpg’ or content_img.content_type == ‘image/png’:
# 获取当前结构化时间用于拼接图片名称
nowtime = datetime.datetime.now().strftime(’%Y%m%d%H%S’)
# 创建一个文件
path = os.path.join(settings.MEDIA_ROOT,nowtime + content_img.name)
# 写文件遍历图片文件流
with open(path, ‘wb’) as f:
for content in content_img.chunks():
f.write(content)
# 关闭文件流
f.close()
# 拼接文件名和路径
user_img = ‘图片存放的路径{}’.format(nowtime + content_img.name)
# 返回图片路径
response = {
“status”: 1,
“message”: “上传成功”,
‘file’: user_img,
}
return HttpResponse(json.dumps(response))

        else:response={"status": 0,"message": "只能上传jpeg、jpg、png格式的图片！",}return HttpResponse(json.dumps(response))else:response = {"status": 0,"message": "图片超过了2M！",}return HttpResponse(json.dumps(response))

图片上传的具体设置步骤请参考：https://blog.csdn.net/weixin_45457042/article/details/103975741
希望对您有所帮助。有疑问可以留言。

Django中summernote富文本编辑器完整前后端相关推荐

Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django学习18 -- 富文本编辑器（Rich Edit）
1. 富文本编辑器,Rich Edit CharField,单行文本(Django默认) TextField,多行文本(Django默认) 富文本编辑器是能显示(编辑)图文效果的输入控件 2. Dja ...
kind富文本编辑器_在项目中集成富文本编辑器
前言现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...
django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...

Django中summernote富文本编辑器完整前后端

上传图片

Django中summernote富文本编辑器完整前后端相关推荐

最新文章

热门文章