Django使用summernote富文本编辑器，完整前后端

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Summernote</title><link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script><link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div style="width: 60%;margin:20px auto" ><div id="summernote"></div>
</div>
<script>$(document).ready(function() {$('#summernote').summernote({height : '200px',placeholder: 'Hello hello hello ...',lang : 'zh-CN',callbacks: {onImageUpload: function(files, editor, $editable) {sendFile(files);}},toolbar: [[ 'style', [ 'style' ] ],[ 'font', [ 'bold', 'italic',  'clear'] ],[ 'fontname', [ 'fontname' ] ],[ 'fontsize', [ 'fontsize' ] ],[ 'color', [ 'color' ] ],[ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],['picture'],[ 'table', [ 'table' ] ],[ 'insert', [ 'link'] ],[ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]]});});
</script>
</body>
</html>

这是富文本编辑器的效果图

下面附上js代码，包括提交图片和文本


<form id="ftn">{% csrf_token %}<div><input type="text" id="title" name="title" placeholder="请输入帖子标题"/><div><input class="summernote" id="summernote" name="content"></div></div><button type="button" onclick="save()">提交</button></form><script>/*** 编辑器新增的ajax上传图片函数* @param files* @param editor* @param $editable* @returns {boolean}*/function sendFile(files, editor, $editable) {var size = files[0].size;if((size / 1024 / 1024) > 2) {alert("图片大小不能超过2M...");return false;}var formData = new FormData();formData.append("file", files[0]);$.ajax({data : formData,type : "POST",url : "/instantuploa/",    // 图片上传出来的url，返回的是图片上传后的路径，http格式cache : false,contentType : false,processData : false,dataType : "json",success: function(response) {//data是返回的hash,key之类的值，key是定义的文件名if (response['status'] == 1){//将图片插入到编辑框内$('#summernote').summernote('insertImage', response.file, 'img');}else{alert('上传失败，请重新上传！');return false}},error:function(){alert("上传失败");}});}function save() {var tet = $('#summernote').summernote('code' );var title = $('#title').val();var data = {content : tet,title : title,};console.log(data);$.ajax({cache: true,type: 'POST',url:'/text/',data:data,success:function (data) {//写上你的回调处理}})}
</script>

接下里是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,需要的可以直接复制 Summernote ...
django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
summernote富文本编辑器
一.文档二.使用四.他山之石一.文档官网地址 https://summernote.org/ github https://github.com/summernote/summernote 选 ...
Django学习18 -- 富文本编辑器（Rich Edit）
1. 富文本编辑器,Rich Edit CharField,单行文本(Django默认) TextField,多行文本(Django默认) 富文本编辑器是能显示(编辑)图文效果的输入控件 2. Dja ...
前端 summernote富文本编辑器点击文章预览的功能实现
一般如果要在网页项目中使用文章编辑器的话,都会考虑summernote富文本编辑器,毕竟使用简便,而且是开源的,一般的用法就是: <div class="form-group" ...

Django使用summernote富文本编辑器，完整前后端

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

最新文章

热门文章