Django集成Markdown编辑器【附源码】 (2)

实例化

<script type="text/javascript"> $(function () { var EditormdView = editormd.markdownToHTML("editormd-view", { htmlDecode: "style,script,iframe", // you can filter tags decode emoji: true, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true // 默认不解析 }); }); </script>

图片上传

图片是内容编辑中不可缺少的元素,markdown作为标记语言默认不存储图片,仅有url引用标记,editor.md提供了图片上传的方法,当然需要配合后端程序一起将用户选择的图片进行本地或云端存储

接下来我们看一个图片上传存储服务器本地的案例

editor.md接收json格式的返回数据,服务端在处理完图片上传之后需要按照如下格式返回数据

{ success : "状态码0或1", //0表示上传失败;1表示上传成功 message : "提示信息", //上传成功或失败返回的信息 url : "图片地址" //上传成功时才返回 }

先编写一个upload的函数来处理上传,最终返回上边的json格式数据即可

@csrf_exempt def upload(request): upload_file = request.FILES['imagefile'] if request.method == 'POST' and upload_file: success, message = 0, '上传失败' # 本地创建保存图片的文件夹 path = settings.STATIC_URL + 'upload/' + time.strftime('%Y%m%d') + 'http://www.likecs.com/' if not os.path.exists(settings.BASE_DIR + path): os.makedirs(settings.BASE_DIR + path) # 拼装本地保存图片的完整文件名 filename = time.strftime('%H%M%S') + '_' + upload_file.name local_file = settings.BASE_DIR + path + filename # 写入文件 with open(local_file, 'wb+') as f: for chunk in upload_file.chunks(): f.write(chunk) success, message = 1, '上传成功' # 返回格式 data = { 'success': success, 'message': message, 'url': path + filename } return JsonResponse(data) else: return JsonResponse({'state': 0, 'message': 'Not support method or Can not get file'})

由于前端页面采用post方式上传,会遇到CSRF问题导致403,这里我们通过添加装饰器@csrf_exempt来取消CSRF验证

接着添加一个url地址指向这个view

path('api/upload/', upload,),

上边我们已经配置过editormd上传图片相关的image参数了,就可以直接通过编辑器工具栏上的上传图片图标上传图片到服务器本地

如果要上传图片到第三方的云存储,参考云存储提供的API修改upload的view函数即可

源码地址

https://github.com/ops-coffee/demo/tree/master/markdown

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgdfz.html