因客户需求,需要QQ截图后,能直接粘贴到htmleditor编辑器中,不要保存本地文件再上传,再插入到编辑器,太过麻烦。

常规做法:QQ截图-->选择保存路径-->确定保存文件-->在编辑器中点击上传图片-->选择图片-->确定选择-->确定上传并插入到编辑器

使用本插件后:QQ截图-->在编辑器中按下Ctrl+V,或点击右键“粘贴”

由原本的7步操作简化为2步,体验提升不少。

另外无意中发现,在火狐浏览器中,浏览器原生就支持,不需要插件,但Chrome浏览器不行,只能自己实现了

废话不多说,直接上代码,本插件为原创,目前只测试了Chrome浏览器

关键核心代码:

代码方案1:

Ext.namespace('Ext.ux', 'Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.PasteImage = function(config) {
config = config || {};
Ext.apply(this, config);
this.init = function(htmlEditor) {
this.editor = htmlEditor;
this.editor.on('afterrender', onAfterrender, this, {
delay: 200
});//延时绑定事件,避免编辑器未加载完成,导致事件绑定不成功
};
function onAfterrender(htmlEditor) {
var editor = htmlEditor;
editor.iframe.contentWindow.document.onpaste = function(event) {//注册粘贴事件
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {//遍历剪贴板数据
var item = items[index];
if (item.kind === 'file') {//是文件,且是图片类型
if (item.type.match(/^image\//)) {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event) {
editor.relayCmd('insertimage', event.target.result);//将图片base64编码的数据,以图片形式插入编辑器中
};
reader.readAsDataURL(blob);
break
}
}
}
}
}
}

代码方案2(真正扩展插件方式):

Ext.namespace('Ext.ux', 'Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.PasteImage = Ext.extend(Ext.util.Observable, {
// private
init: function(cmp){
this.cmp = cmp;
this.cmp.on('afterrender', this.onAfterrender, this, {
delay: 200
});//延时执行事件,避免编辑器未加载完成,导致事件绑定不成功
},
// private
onAfterrender: function(){
var editor = this.cmp;
this.cmp.iframe.contentWindow.document.onpaste = function(event) {//注册粘贴事件
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {//遍历剪贴板数据
var item = items[index];
if (item.kind === 'file') {//是文件,且是图片类型
if (item.type.match(/^image\//)) {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event) {
editor.relayCmd('insertimage', event.target.result);//将图片base64编码的数据,以图片形式插入编辑器中
};
reader.readAsDataURL(blob);
break
}
}
}
}
}
});

使用方法:

Ext.onReady(function() {
Ext.QuickTips.init();
new Ext.FormPanel({
renderTo: 'layout',
defaultType: 'textfield',
items: [{
xtype: 'htmleditor',
fieldLabel: 'my htmlEditor',
width: 650,
height: 350,
plugins: new Ext.ux.form.HtmlEditor.PasteImage()
}
]
});
});

服务器端处理代码(将图片存为文件,并将地址替换到HTML中):

public static string ReplaceHtmlImage(string html)
{
var images = GetImgSrcList(html);
if (images.Count > )
{
var path = "/UploadFiles/" + DateTime.Today.ToString("yyyyMM/dd");
var dir = HttpContext.Current.Server.MapPath("~" + path);
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
string file = string.Empty;
foreach (string image in images)
{
if (image.StartsWith("data:image"))
{
file = path + "/" + DateTime.Now.ToString("HHmmssfffff") + "." + image.Substring(, ).Replace(";", "");
if (file.EndsWith("png") || file.EndsWith("gif") || file.EndsWith("jpeg"))
{
File.WriteAllBytes(HttpContext.Current.Server.MapPath("~" + file), Convert.FromBase64String(image.Split(new string[] { ";base64," }, StringSplitOptions.None)[]));
html = html.Replace(image, file);
}
}
}
}
return html;
} public static string HtmlImageTagRegex = @"<img\b[^<>]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?<src>[^\s\t\r\n""'<>]*)[^<>]*?/?[\s\t\r\n]*>"; /// <summary>
/// 多个匹配内容
/// </summary>
/// <param name="sInput">输入内容</param>
/// <param name="sRegex">表达式字符串</param>
/// <param name="sGroupName">分组名, ""代表不分组</param>
public static List<string> GetList(string sInput, string sRegex, string sGroupName)
{
List<string> list = new List<string>();
Regex re = new Regex(sRegex, RegexOptions.IgnoreCase | RegexOptions.IgnorePatternWhitespace | RegexOptions.Multiline);
MatchCollection mcs = re.Matches(sInput);
foreach (Match mc in mcs)
{
if (sGroupName != "")
{
list.Add(mc.Groups[sGroupName].Value);
}
else
{
list.Add(mc.Value);
}
}
return list;
} /// <summary>
/// 图片地址
/// </summary>
/// <param name="sInput">输入内容</param>
public static List<string> GetImgSrcList(string sInput)
{
return GetList(sInput, HtmlImageTagRegex, "src");
}

[原创]extjs htmleditor增加截图快速粘贴功能 插件的更多相关文章

  1. Win8增加了快速启动功能......

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-11) Win8增加了快速启动功能,能让计算机尽快的启动进入Windows界面.win8的这种快速启动功能只会在“关机 ...

  2. PyCharm 2019.3发布,增加了哪些新功能呢?

    Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code.Sublime.NotePad.Python自带编辑器IDLE.J ...

  3. 空间日志编辑器:word文档图文快速粘贴到web

    百度ueditor可以实现word文档图文快速粘贴到web 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前 ...

  4. ABBYY FineReader的快速任务功能如何用

    在使用ABBYY FineReader Pro for Mac OCR文字识别软件处理文档时,经常会执行一系列相同的步骤,如扫描.识别.将已识别文本导出为特定格式或导出至特定应用程序.针对经常执行的任 ...

  5. 【原创】Matlab中plot函数全功能解析

    [原创]Matlab中plot函数全功能解析 该帖由Matlab技术论(http://www.matlabsky.com)坛原创,更多精彩内容参见http://www.matlabsky.com 功能 ...

  6. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  7. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  8. 仿复制粘贴功能,长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  9. 取消putty右键粘贴功能

    还是非常喜欢putty的.就是右键默认的粘贴功能比较讨人厌.

随机推荐

  1. CountDownLatch和CyclicBarrier使用上的区别

    一.CountDownLatchDemo package com.duchong.concurrent; import java.util.Map; import java.util.concurre ...

  2. Deepin 15.11 install nvidia dirver[mei you an zhuang shu ru fa]

    1.firstly, exec: sudo vim /etc/modprobe.d/blacklist-nouveau.conf[create], and input [blacklist nouve ...

  3. Spring中声明式事务的注解@Transactional的参数的总结(REQUIRED和REQUIRES_NEW的与主方法的回滚问题)

    一.事务的传播行为1.介绍 当事务方法被另一个事务方法调用时,必须指定事务应该如何传播.例如:方法可能继续在现有事务中运行,也可能开启一个新事务,并在自己的事务中运行.2.属性 事务的传播行为可以由传 ...

  4. WCF-方法重载

    一.服务端重载 一般写法直接重载,但是会报错,如下. [ServiceContract] public interface IService1 { [OperationContract] string ...

  5. Android中使用LitePal操控SQLite数据库

    <第一行代码>读书手札 (一)什么是LitePal数据库 LitePal数据库是安卓的一个开源库,我们在以后的开发中,将会遇到许许多多的开源库,感谢开源社 区:因为开源社区的存在,一些我们 ...

  6. luoguP1823 [COI2007] Patrik 音乐会的等待

    题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...

  7. MAC帧封装

    通过控制台输入一段文字,输出MAC帧的2进制和16进制的字符串,主要是求FCS.这里只考虑单帧的情况,即只考虑输入数据在1字节~1500字节之间的情况,对于更长的数据暂不考虑. 1.MAC帧基本格式 ...

  8. 题解-AtCoder ARC-083F Collecting Balls

    Problem ARC083F 题意概要:给定 \(2n\) 个二维平面上的球,坐标分别为 \((x_i,y_i)\),并给出 \(n\) 个 \(A\)类 机器人 和 \(n\) 个 \(B\)类 ...

  9. javascript 之 call,apply原理

    一.call原理 1.使用JQuery的call功能 var add(c,d){ return this.a+this.b+c+d } var obj={a:1,b:2} add.Call(obj,3 ...

  10. Apollo 与 .net core

    appsettings配置内容 { "Apollo": { "AppId": "netcore", "Env": &qu ...