主要参考以下:

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自带的

  1. file_picker_callback: function(callback, value, meta) {
  2. if(meta.filetype=='image') {
  3. console.log('ddd');
  4. $('#my_form input').click();
  5. }
  6. }

  

然后添加html中的上传按钮

  1. <iframe id="form_target" name="form_target" style="display:none"></iframe>
  2. <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 %}
  3. <input name="image" type="file" onchange="$('#my_form').submit();this.value='';">
  4. </form>

  

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

  1. def upload(request):
  2. try:
  3. file = request.FILES['image']
  4. #form提交的文件的名字,上面html里面的name
  5. img = Image.open(file)
  6. img.thumbnail((500, 500), Image.ANTIALIAS)
  7. img.save('static/upload/images/'+file.name, img.format)
  8. #图片的name和format都是动态获取的,支持png,jpeg,gif等
  9. except Exception as e:
  10. return HttpResponse('error %s' % e)
  11. path = '/site_media/'+file.name
  12. 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是固定的哟,

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

django中tinymce添加图片上传功能的更多相关文章

  1. Django中怎么做图片上传--图片展示

    1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...

  2. ckeidtor编辑器添加图片上传功能

    1.ckeditor默认没有上传图片功能,只能通过Url显示图片,图下图 2.首先说明,ckeditor是有上传功能的,只是隐藏了,需要通过配置让它显示 找到ckeditor/plugins/imag ...

  3. MVC.Net5:添加Tinymce的图片上传功能

    Tinymce是目前几个主流的Web文本编辑器之一,不过它的图片上传功能是要收费的,而其它几个免费的上传图片的插件支持的都是PHP.那么就只能自己动手写一个了(源代码下载). 准备工作如下:1.   ...

  4. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  5. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  6. 2.0 vue2+tinymce实现图片上传与回显

    1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...

  7. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  8. Aps.net中基于bootstrapt图片上传插件的应用

    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...

  9. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

随机推荐

  1. Android使用SAX解析XML(6)

    应用截图: (1)开始运行时 (2)选择学院 (3)选择专业 (4)选择班级 (5)选择班级的详细信息 本文参考了<Android平台开发之旅>.

  2. FireMonkey ListView 自动计算行高

    说明:展示 ListView 视其每一行 Item 的 Detail 字串长度自动调整高度(可每行高度不同). 适用:Delphi XE7 / XE8 源码下载:[原创]ListView_自动计算行高 ...

  3. 实用的Scala泛函编程

    既然谈到实用编程,就应该不单止了解试试一个新的编程语言那么简单了,最好通过实际的开发项目实例来演示如何编程.心目中已经有了一些设想:想用Scala泛函编程搞一个开源的数据平台应用系统,也就是在云平台P ...

  4. jbox演示30种不同的调用方法

     在线预览 插件说明 - jbox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Sa ...

  5. 多线程下C#如何保证线程安全?

    多线程编程相对于单线程会出现一个特有的问题,就是线程安全的问题.所谓的线程安全,就是如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是 ...

  6. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  7. jQuery立体式数字滚动条增加

    1.html结构 <div class="numberRun1"></div> 2.js <script type="text/javasc ...

  8. css笔记图

    1.css3选择器 2.css3动画 3.flex 4.自适应 5.边距图

  9. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q9-Q12)

    Question 9 You are designing an external binary large object (BLOB) store provider by implementing t ...

  10. Android 触摸手势基础 官方文档概览

    Android 触摸手势基础 官方文档概览 触摸手势检测基础 手势检测一般包含两个阶段: 1.获取touch事件数据 2.解析这些数据,看它们是否满足你的应用所支持的某种手势. 相关API: Moti ...