django中tinymce添加图片上传功能

Posted 2020-07-26 juandx

 

主要参考以下：

https://pixabay.com/en/blog/posts/direct-image-uploads-in-tinymce-4-42/

http://blog.csdn.net/tianlanzhixie/article/details/50240071

 

这里还有个用php使用的，可以参考http://zhaoda.net/tinymce-upload/example.html

 

大体思路就是

添加js的一个函数，这个是tinymec自带的

file_picker_callback: function(callback, value, meta) {
                if(meta.filetype==‘image‘) {
                    console.log(‘ddd‘);
                    $(‘#my_form input‘).click();
                }
            }

　　

然后添加html中的上传按钮

 <iframe id="form_target" name="form_target" style="display:none"></iframe>
        <form id="my_form" action="{% url ‘blog.views.upload‘ %}" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden">{% csrf_token %}
            <input name="image" type="file" onchange="$(‘#my_form‘).submit();this.value=‘‘;">
        </form>

　　

然后去django中添加上传的函数，就是url到view的那一套

def upload(request):
    try:
        file = request.FILES[‘image‘]
        #form提交的文件的名字，上面html里面的name
        img = Image.open(file)
        img.thumbnail((500, 500), Image.ANTIALIAS)
        img.save(‘static/upload/images/‘+file.name, img.format)
        #图片的name和format都是动态获取的，支持png，jpeg，gif等
    except Exception as e:
        return HttpResponse(‘error %s‘ % e)
    path = ‘/site_media/‘+file.name
    return HttpResponse("<script>top.$(‘.mce-btn.mce-open‘).parent().find(‘.mce-textbox‘).val(‘%s‘).closest(‘.mce-window‘).find(‘.mce-primary‘).click();</script>" % path)

　　

注意这里的site_media是固定的哟，

static/upload/images/才是自己放代码的路径