开源地址：https://github.com/yuezhongxin/paste-upload-image.js

支持 Ctrl+C/Ctrl+V 上传，支持拖拽上传，也支持 QQ/微信截图上传。

textarea使用（返回markdown格式的图片）：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script src="scripts/jquery.js"></script>

    <script src="scripts/paste-upload-image.js"></script>

</head>

<body>

    <textarea name="txtContent" id="txtContent" style="width:500px;height:200px;"></textarea>

    <script>

        $("#txtContent").pasteUploadImage();//bind textarea

    </script>

</body>

</html>

tinyMCE使用：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script src="scripts/jquery.js"></script>

    <script src="tinymce/tinymce.js"></script>

</head>

<body>

    <textarea name="mceContent" id="mceContent"></textarea>

    <script>

        $("#txtContent").pasteUploadImage();

        tinymce.init({

            selector: '#mceContent',

            height: 500,

            plugins: [

              'pasteUpload', //add pasteUpload plugin

              'advlist autolink lists link image charmap print preview anchor',

              'searchreplace visualblocks code fullscreen',

              'insertdatetime media table contextmenu code'

            ],

            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

            content_css: [

              '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',

              '//www.tinymce.com/css/codepen.min.css'

            ]

        });

    </script>

</body>

</html>

后端处理：

public class ImageUploaderController : Controller

{

    [AllowCors("sub.example.com")]//跨域访问

    [HttpPost]

    public async Task<string> ProcessPasteUpload(HttpPostedFileBase imageFile, string mimeType)

    {

        ///to do...

    }

}

public class AllowCorsAttribute : ActionFilterAttribute

{

    private string[] _domains;

    public AllowCorsAttribute(string domain)

    {

        _domains = new string[] { domain };

    }

    public AllowCorsAttribute(string[] domains)

    {

        _domains = domains;

    }

    public override void OnActionExecuting(ActionExecutingContext filterContext)

    {

        var context = filterContext.RequestContext.HttpContext;

        var host = context.Request.UrlReferrer?.Host;

        if (host != null && _domains.Contains(host))

        {

            context.Response.AddHeader("Access-Control-Allow-Origin", $"http://{host}");

            context.Response.AddHeader("Access-Control-Allow-Credentials", "true");

        }

        base.OnActionExecuting(filterContext);

    }

}

效果展示：

JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）的更多相关文章

  1. 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  2. 复制粘贴之插件（jquery.zclip.min.js）需要安装flash

    .line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;marg ...

  3. 复制粘贴之插件（clipboard.min.js）不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

  4. 锋利的jQuery复制粘贴（一）

    两者区别:$(document).ready();网页中多有dom结构绘制完毕后就执行, 可能dom元素关联的东西没用加载完.[若有多个弹框,均可以执行输出] window.onload 必须等待多有 ...

  5. 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  6. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...

  7. textarea还剩余字数统计，支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. jQuery event的复制粘贴的坑

    jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...

  9. JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

    因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...

随机推荐

  1. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  2. android http 抓包

    有时候想开发的时候想看APP发出的http请求和响应是什么,这就需要抓包了,这可以得到一些不为人知的api,比如还可以干些“坏事”... 需要工具: Fiddler2 抓包(点击下载) Android ...

  3. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  4. 记录我这一年的技术之路(nodejs纯干货)

    2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始 开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...

  5. java中易错点（二）

    java,exe是java虚拟机 javadoc.exe用来制作java文档 jdb.exe是java的调试器 javaprof,exe是剖析工具 解析一: sleep是线程类(Thread)的方法, ...

  6. 【干货分享】流程DEMO-人员调动流程

    流程名: 调动 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单:  流程:  图片:3.png DEMO包下载: http://files.cnblogs.com ...

  7. 微信小程序二维码推广统计

    微信小程序可以通过生成带参数的二维码,那么这个参数是可以通过APP的页面进行监控的 这样就可以统计每个二维码的推广效果. 今天由好推二维码推出的小程序统计工具HotApp小程序统计也推出了带参数二维码 ...

  8. ReactiveCocoa代码实践之-UI组件的RAC信号操作

    上一节是自己对网络层的一些重构,本节是自己一些代码小实践做出的一些demo程序,基本涵盖大多数UI控件操作. 一.用UISlider实现调色板 假设我们现在做一个demo,上面有一个View用来展示颜 ...

  9. Set up VLAN (802.1q) tagging on a network interface?

    SOLUTION VERIFIED October 13 2015 KB39674 KB741413 environment Red Hat Enterprise Linux 4 Red Hat En ...

  10. Github使(zhuang)用(bi)指南

    本文针对未能熟练使用GitHub的人员,旨在为其指明通往新世界的小路. 一些闲话可以无视 在这个开源的时代,可能你听说过GitHub,知道大概是个什么.但是,你要是不能熟练的玩起来,怎么和大神取经,怎 ...