django中tinymce添加图片上传功能

时间：2023-11-25 15:02:14

主要参考以下：

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/才是自己放代码的路径

相关文章