因客户需求,需要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. CSS 按钮水波纹特效

    /* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */  打开注释及效果不扩散在外 } .ripple:focus{ out ...

  2. 通过调用Windows本地RPC服务器bypass UAC

    备战一个月比赛,导致近期都没啥时间更新博客,正好今天看到一篇通过调用本地RPC服务的文章,觉得非常有意思,就拿来充充博客. 在1.0版本的APPINFO.DLL中的RPC服务调用接口ID为:201ef ...

  3. 关于启动kylin报Failed to find metadata store by url: kylin_metadata@hbase的问题解决

    一.出问题的原因 昨天因为项目需要,要将cloudera集群改成高可用,没想到失败了,当时因为冲动手动删了几个hdfs实例的原因,导致退不到原来的状态,折腾了一天,最后终于退回了非HA的集群,但是hd ...

  4. feign学习笔记

    使用:

  5. 【hash】Power Strings

    [题意]: 给出s串出来,能否找到一个前缀 ,通过多次前缀进行拼接.构成s串.如果有多个,请输出最多次数那个. 如:aaaa 可以用1个a,进行4次拼接 可以用2个a,进行2次拼接 可以用4个a,进行 ...

  6. C++ 相关问题记录

    目录 编译链接 使用初始化和使用赋值时,调用的函数不同:使用 auto_ptr() 时可能会出现编译错误 宏定义不受命名空间的约束 Switch-case 中不能定义变量 技巧/注意项 多层继承中基类 ...

  7. java常用配置文件头部声明

    spring: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...

  8. javascript Ajax 学习

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! AJAX是asynchronousjavascript and XML的简写,就是异步的javascrip ...

  9. Spring中bean的管理

    Spring 中常见的容器 我们知道spring容器就是spring中bean的驻留场所.spring容器并不是只有一个.spring自带了多个容器实现,可以归为两种不同的类型:bean工厂和应用上下 ...

  10. Spring Security Oauth2 : Possible CSRF detected

    Spring Security Oauth2 : Possible CSRF detected 使用Spring Security 作为 Oauth2 授权服务器时,在授权服务器登录授权后,重定向到客 ...