开源地址：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. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. H5坦克大战之【建造敌人的坦克】

      公司这几天在准备新版本的上线,今天才忙里偷闲来写这篇博客.接着上一篇的"H5坦克大战之[玩家控制坦克移动2]"(http://www.cnblogs.com/zhouhuan/ ...

  3. 百度推出新技术 MIP，网页加载更快，广告呢？

    我们在2016年年初推出了MIP,帮助移动页面加速(原理).内测数据表明,MIP页面在1s内加载完成.现在已经有十多家网站加入MIP项目,有更多的网站正在加入中.在我们收到的反馈中,大部分都提到了广告 ...

  4. 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程

    读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...

  5. 如何定位Oracle数据库被锁阻塞会话的根源

    首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...

  6. 【定有惊喜】android程序员如何做自己的API接口？php与android的良好交互（附环境搭建），让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

  7. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  8. AutoMapper的介绍与使用（一）

    软件环境 vs2015 asp.net mvc 5 .NET Framework 4.5.2 AutoMapper 5.2.0.0 AutoMapper安装 新建asp.net mvc 项目 Auto ...

  9. Java程序：从命令行接收多个数字，求和并输出结果

    一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码:   //王荣荣 2016/9/23     ...

  10. Oracle：一个用户操作多个表空间中表的问题（转）

    原文地址:http://blog.csdn.net/shmiloy001/article/details/6287317 首先,授权给指定用户. 一个用户的默认表空间只能有一个,但是你可以试下用下面的 ...