[原创]extjs htmleditor增加截图快速粘贴功能 插件
因客户需求,需要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增加截图快速粘贴功能 插件的更多相关文章
- Win8增加了快速启动功能......
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-11) Win8增加了快速启动功能,能让计算机尽快的启动进入Windows界面.win8的这种快速启动功能只会在“关机 ...
- PyCharm 2019.3发布,增加了哪些新功能呢?
Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code.Sublime.NotePad.Python自带编辑器IDLE.J ...
- 空间日志编辑器:word文档图文快速粘贴到web
百度ueditor可以实现word文档图文快速粘贴到web 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前 ...
- ABBYY FineReader的快速任务功能如何用
在使用ABBYY FineReader Pro for Mac OCR文字识别软件处理文档时,经常会执行一系列相同的步骤,如扫描.识别.将已识别文本导出为特定格式或导出至特定应用程序.针对经常执行的任 ...
- 【原创】Matlab中plot函数全功能解析
[原创]Matlab中plot函数全功能解析 该帖由Matlab技术论(http://www.matlabsky.com)坛原创,更多精彩内容参见http://www.matlabsky.com 功能 ...
- Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)
在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...
- 在CMD命令行和PowerShell中实现复制粘贴功能
在CMD命令行和PowerShell中实现复制粘贴功能 常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...
- 仿复制粘贴功能,长按弹出tips的实现
方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...
- 取消putty右键粘贴功能
还是非常喜欢putty的.就是右键默认的粘贴功能比较讨人厌.
随机推荐
- CSS 按钮水波纹特效
/* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */ 打开注释及效果不扩散在外 } .ripple:focus{ out ...
- 通过调用Windows本地RPC服务器bypass UAC
备战一个月比赛,导致近期都没啥时间更新博客,正好今天看到一篇通过调用本地RPC服务的文章,觉得非常有意思,就拿来充充博客. 在1.0版本的APPINFO.DLL中的RPC服务调用接口ID为:201ef ...
- 关于启动kylin报Failed to find metadata store by url: kylin_metadata@hbase的问题解决
一.出问题的原因 昨天因为项目需要,要将cloudera集群改成高可用,没想到失败了,当时因为冲动手动删了几个hdfs实例的原因,导致退不到原来的状态,折腾了一天,最后终于退回了非HA的集群,但是hd ...
- feign学习笔记
使用:
- 【hash】Power Strings
[题意]: 给出s串出来,能否找到一个前缀 ,通过多次前缀进行拼接.构成s串.如果有多个,请输出最多次数那个. 如:aaaa 可以用1个a,进行4次拼接 可以用2个a,进行2次拼接 可以用4个a,进行 ...
- C++ 相关问题记录
目录 编译链接 使用初始化和使用赋值时,调用的函数不同:使用 auto_ptr() 时可能会出现编译错误 宏定义不受命名空间的约束 Switch-case 中不能定义变量 技巧/注意项 多层继承中基类 ...
- java常用配置文件头部声明
spring: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...
- javascript Ajax 学习
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! AJAX是asynchronousjavascript and XML的简写,就是异步的javascrip ...
- Spring中bean的管理
Spring 中常见的容器 我们知道spring容器就是spring中bean的驻留场所.spring容器并不是只有一个.spring自带了多个容器实现,可以归为两种不同的类型:bean工厂和应用上下 ...
- Spring Security Oauth2 : Possible CSRF detected
Spring Security Oauth2 : Possible CSRF detected 使用Spring Security 作为 Oauth2 授权服务器时,在授权服务器登录授权后,重定向到客 ...