django-makdown编辑器支持本地图片上传

Posted 2021-05-25 努力乄小白

1.文本内容：这是渲染数据部分

<div id="editor">
     {{ field }}
</div>

2.这是JS内容：让textarea转换为编辑器

var WIKI_UPLOAD_URL = "{% url \'web:wiki_upload\' project_id=request.tracer.project.id %}" 
       /*
        初始化markdown编辑器(textarea转换为编辑器)
         */
        function initEditorMd() {
            editormd(\'editor\',{
                placeholder: "请输入内容",
                height: 500,
                path: "{% static \'/web/plugin/editor.md/lib/\' %}", //path是告诉markdown组件的位置,需要的依赖
                flowChart : true ,//支持流程图
                imageUpload: true,//增加本地上传图片
                imageFormats: ["jpg",\'png\',\'jpeg\',\'pdf\',\'gif\'],//上传图片格式
                imageUploadURL:WIKI_UPLOAD_URL,//上传到那个地址
            })
        }

3.视图内容：xframe_options_sameorigin装饰器是解决xframe_options报错的

from django.views.decorators.csrf import csrf_exempt
from utils.tencent.cos import upload_file
from django.views.decorators.clickjacking import xframe_options_sameorigin

@xframe_options_sameorigin
@csrf_exempt
def wiki_upload(request,project_id):
    """markdown上传图片"""
    print("收到上传的图片了")
    image_object = request.FILES.get("editormd-image-file")
    #image_object文件对象上传到当前项目的存储桶中
    image_url = upload_file(
        request.tracer.project.bucket,
        request.tracer.project.region,
        image_object,
        image_object.name,
    )
    print(image_url)
    #result是markdown要求返回的数据格式
    result = {
        \'success\': 1,#1成功，0失败
        \'message\': None,
        \'url\': image_url
    }

 最终效果显示：