[原创]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 > 0)
            {
                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(11, 3).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)[1]));
                            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");
        }