Ticket #13547: plugin.js

/*****************************************************************************************

        This plugin opens a little popup after pasting an image.
        You can set several options that will be set to your upload URL.
        
        The upload URL
                config.imageUploadUrl = 'browser/upload.php?pasted=newfile';
        is extended to
                browser/upload.php?pasted=newfile&filepath=' + YourPath + '&imgwidth=' + YourWidth + '&imgheight=' + YourHeight;
        
        The filepath, imgwidth and imgheight variables are only examples. Create inputs by your needs.
        
        Example upload.php
        <?PHP
                if($_GET['pasted'] == 'newfile') {
                        $filename = rawurldecode($_GET['filename']);
                        $filepath = rawurldecode($_GET['filepath']);
                        $imgwidth = $_GET['imgwidth'];
                        $imgheight = $_GET['imgheight'];
                        // Your file upload progress
                        echo json_encode(
                                array(
                                        'uploaded' => 1,
                                        'fileName' => $filename,
                                        'url' => 'images/'.$filepath.'/'.$filename,
                                        'attributes' => array(
                                                'width' => $imgwidth,
                                                'height' => $imgheight
                                        )
                                )
                        );
                }
        ?>
        
*****************************************************************************************/

'use strict';

(function()
{
        CKEDITOR.plugins.add( 'pastedupload',
        {
                requires: 'uploadwidget',

                onLoad : function()
                {
                        CKEDITOR.addCss(
                                '.cke_upload_loaded, .cke_upload_uploading {' +
                                        'position: static;' +
                                        'max-width: 100%;' +
                                '}' +
                                '.cke_upload_loaded img, .cke_upload_uploading img {' +
                                        'max-width: 100%;' +
                                        'opacity: 0.3;' +
                                '}' +
                                '.cke_upload_background_cover {' +
                                        'position: fixed;' +
                                        'z-index: 9000;' +
                                        'top: 0px;' +
                                        'left: 0px;' +
                                        'background-color: white;' +
                                        'opacity: 0.5;' +
                                        'width: 100%;' +
                                        'height: 100%;' +
                                '}' +
                                '.cke_pastedupload_options {' +
                                        'position: fixed;' +
                                        'z-index: 9010;' +
                                        'top: 50%;' +
                                        'left: 50%;' +
                                        'transform: translate(-50%, -50%);' +
                                        'border: 1px solid #bebebe;' +
                                        'background: #f4f4f4;' +
                                        'padding: 20px;' +
                                '}' +
                                '.cke_pastedupload_options input {' +
                                        'border: 1px solid #bebebe;' +
                                        'background: #fff;' +
                                '}' +
                                '.cke_pastedupload_options div {' +
                                        'margin: 4px;' +
                                '}' +
                                '#cke_pastedupload_button {' +
                                        'width: 100%;' +
                                        'background: #bebebe;' +
                                        'text-align: center;' +
                                '}'
                        );
                },
                
                init: function( editor )
                {
                        if ( !CKEDITOR.plugins.clipboard.isFileApiSupported ) {
                                return;
                        }
                        
                        var popupSource = '<div class="cke_upload_background_cover"></div>' +
                                '<div class="cke_pastedupload_options">' +
                                        '<div>Path: <input type="text" id="cke_pastedupload_path" /> px</div>' +
                                        '<div>Width: <input type="text" id="cke_pastedupload_width" /> px</div>' +
                                        '<div>Height: <input type="text" id="cke_pastedupload_height" /> px</div>' +
                                        '<div><input type="button" id="cke_pastedupload_button" value="upload" /></div>' +
                                '</div>';
                        
                        var loadingImage = 'data:image/gif;base64,R0lGODlhDgAOAIAAAAAAAP///yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=';
                        var optionsPopup;
                        var imageAttributes = {};
                        var fileUrl;
                        var fileTools = CKEDITOR.fileTools;
                        var uploadUrl = fileTools.getUploadUrl( editor.config, 'image' );
                        var loaders = {};

                        if ( !uploadUrl ) {
                                window.console && window.console.log(
                                        'Error: Upload URL for the Upload Image feature was not defined. ' +
                                        'For more information see: http://docs.ckeditor.com/#!/guide/dev_file_upload'
                                );
                                return;
                        }
                        
                        fileTools.addUploadWidget( editor, 'imagepasted', {
                                loadMethod: 'load',
                                parts: {
                                        img: 'img'
                                },
                                onLoaded: function( upload ) {
                                        this.parts.img.setAttribute( 'src', upload.data );
                                },
                                onUploaded: function( upload ) {
                                        var imgSource = '<img src="' + upload.url + '" ';
                                        for(var key in imageAttributes) {
                                                if(key == 'width' || key == 'height') {
                                                        if(editor.config.image_prefillDimensions) {
                                                                imgSource += key + '="' + imageAttributes[key] + '" ';
                                                        }
                                                }
                                                else {
                                                        imgSource += key + '="' + imageAttributes[key] + '" ';
                                                }
                                        }
                                        imgSource += '/>';
                                        
                                        this.replaceWith( imgSource );
                                }
                        });
                        
                        editor.on( 'paste', function( evt ) {
                                var data = evt.data,
                                        dataTransfer = data.dataTransfer,
                                        filesCount = dataTransfer.getFilesCount();
                                
                                if ( data.dataValue || !filesCount ) {
                                        return;
                                }
                                
                                for ( var i = 0; i < filesCount; i++ ) {
                                        var file = dataTransfer.getFile( i );
                                        
                                        if ( fileTools.isTypeSupported( file, /image\/(jpeg|png|gif)/ ) ) {
                                                var el = new CKEDITOR.dom.element( 'img' );
                                                el.setAttribute( 'src', loadingImage );
                                                loaders[i] = editor.uploadRepository.create( file );
                                                
                                                if ( el ) {
                                                        loaders[i].load();
                                                        fileTools.markElement( el, 'imagepasted', loaders[i].id );
                                                        
                                                        data.dataValue += el.getOuterHtml();
                                                }
                                        }
                                }
                                
                                if ( !data.dataValue.match( /<img[\s\S]+data:/i ) ) {
                                        return;
                                }
                                
                                optionsPopup = new CKEDITOR.dom.element( 'div' );
                                optionsPopup.setAttributes({ 'class': 'cke_reset_all cke_upload_options' });
                                optionsPopup.setHtml( popupSource );
                                
                                CKEDITOR.document.getBody().append( optionsPopup );
                                
                                document.getElementById('cke_pastedupload_button').onclick = function() {
                                        editor.widgets.registered.imagepasted.loadMethod = 'upload';
                                        
                                        var filepath = document.getElementById('cke_pastedupload_path').value;
                                        var imgwidth = document.getElementById('cke_pastedupload_width').value;
                                        var imgheight = document.getElementById('cke_pastedupload_height').value;
                                        
                                        fileUrl = '&filepath=' + encodeURIComponent(filepath);
                                        fileUrl += '&imgwidth=' + parseInt(imgwidth);
                                        fileUrl += '&imgheight=' + parseInt(imgheight);
                                        
                                        optionsPopup.remove();
                                        
                                        for ( var key in loaders ) {
                                                var filename = loaders[key].fileName;
                                                fileUrl += '&filename=' + encodeURIComponent(filename);
                                                
                                                loaders[key].upload( uploadUrl + fileUrl );
                                                
                                                fileTools.bindNotifications( editor, loaders[key] );
                                        }
                                }
                        }, null, null, 11 );
                        
                        editor.on( 'fileUploadRequest', function( evt ) {
                                var fileLoader = evt.data.fileLoader;
                                var xhr = fileLoader.xhr;
                                
                                xhr.open( 'POST', fileLoader.uploadUrl, true );
                                xhr.setRequestHeader( 'Cache-Control', 'no-cache' );
                                xhr.setRequestHeader( 'X-File-Name', fileLoader.fileName );
                                xhr.setRequestHeader( 'X-File-Size', fileLoader.total );
                                
                                xhr.send( fileLoader.file );
                                
                                evt.stop();
                        }, null, null, 1 );
                        
                        editor.on( 'fileUploadResponse', function( evt ) {
                                evt.stop();
                                
                                var data = evt.data,
                                        xhr = data.fileLoader.xhr;
                                
                                try {
                                        var response = JSON.parse(xhr.responseText);
                                
                                        if ( response.uploaded == 1 ) {
                                                imageAttributes = response.attributes;
                                                data.url = response.url;
                                                if(response.error)
                                                        alert(response.error.message);
                                        }
                                        else {
                                                if(response.error)
                                                        data.message = response.error.message;
                                                evt.cancel();
                                        }
                                } catch ( err ) {
                                        data.message = fileLoader.lang.filetools.responseError;
                                        window.console && window.console.log( xhr.responseText );

                                        evt.cancel();
                                }
                        }, null, null, 1 );
                }
        });
})();