htmleditor paste clipboard

paste image from clipboard to html text editor

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

Ext.define('F1', {
    extend: 'Ext.form.Panel',

    height: 482,
    width: 706,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'htmleditor',
                    height: 361,
                    style: 'background-color: white;',
                    width: 668,
                    anchor: '100%',
                    listeners: {
                    initialize: function(component) {
                        component.iframeEl.dom.contentWindow.document.body.onpaste = function(e) {

                            var items = e.clipboardData.items;
                            var item;
                            var blob;
                            var reader;


                            for (var i = 0; i < items.length; i++) {
                                item = items[i];
                                console.log(item.kind, item.type);

                                if (item.kind == 'file') {
                                    component.setLoading(true);
                                    
reader = new FileReader();
 
                                    reader.onloadend = function(evt) {

                                        component.insertAtCursor('<img style="max-width:100%" src="' + evt.target.result + '">');
                                        component.setLoading(false);
                                    };

                                    blob = item.getAsFile();
                                    reader.readAsDataURL(blob);
                                }
                            }



                        };
                    }
                }
                }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.onReady(function(){

    var f1 = new F1({renderTo: Ext.getBody()});

});