主要参考以下:
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="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/才是自己放代码的路径