主要参考以下:

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

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. 这几天做完简易酒店管理系统,对Sql Server执行计划的浅显了解。

    我是一名大三的小学生,今天开始我的第一篇博客,最近随便做了一个简易的酒店管理系统,对sql执行计划有了初步的了解. 查看上面语句的预估执行计划,在工具栏中有这个按钮 聚集索引扫描被称为Index Sc ...

  2. 词法分析程序 LEX和VC6整合使用的一个简单例子

    词法分析的理论知识不少,包括了正规式.正规文法.它们之间的转换以及确定的有穷自动机和不确定的有穷自动机等等... 要自己写一个词法分析器也不会很难,只要给出了最简的有穷自动机,就能很方便实现了,用if ...

  3. 基于吉日嘎拉的通用权限管理Webform版老界面bug修复

    虽然弄了新界面<基于吉日嘎底层架构的通用权限管理Web端UI更新:参考DTcms后台界面>,但老界面的一点菜单显示的问题还是让我这种强迫症揪心,终于今晚可以美美的睡觉了. 老代码用了Ses ...

  4. Kinect V2 基础教程之彩色图像

    本程序为自己所写,参考素材包括微软官方例子和外文资料,自己做了部分的优化.解释的如果有问题,恳请大家指正. 后台代码: using System.ComponentModel; using Syste ...

  5. The Amazing ProgressBar Control(转)

    好久没写博客了,今天就先转一篇,随后可以再写些~~~ 直接把原文粘过来,就不再进行翻译和个人说明了,因为效果很COOL~ The Amazing ProgressBar Control A progr ...

  6. 孙鑫MFC学习笔记20:Hook编程

    1.HOOK拦截消息,设置越后的钩子优先级越高(钩子队列)2.SetWindowHookEx设置钩子    如果thread identifier为0或其他进程创建的线程,回调函数需要在动态链接库中声 ...

  7. Widget的点击事件

    本文实现Widget中的按钮点击事件,点击一次下面的按钮,上面的数字减少1. 首先是Manifest文件: <?xml version="1.0" encoding=&quo ...

  8. 使用PackageManager获得应用(包)信息

    PackageManager是Android中一个很有用的类,能够获取已安装的应用(包)的信息,如应用名称.图标.权限,安装.删除应用(包)等. 以下代码可以获得已安装应用(包)的信息: // 包管理 ...

  9. XE7 iOS 取得系统字型名称

    系统字型名称在每个平台的取得方式不尽相同,以下示范如何在 iOS 取得系统内所有字型的名称: uses // 加入下面二个 uses 文件 iOSapi.UIKit, iOSapi.Foundatio ...

  10. x8086汇编在显存中显示字符串

    题目:在屏幕中间显示绿色,绿底红色,白底蓝色的字符串‘welcome to masm!’ 80X25彩色字符模式显示缓冲区的结构: 在内存地址结构中,B8000H~BFFFFH共32KB的空间,为80 ...