/** * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ 'use strict'; ( function() { CKEDITOR.plugins.add( 'uploadimage', { requires: 'uploadwidget', onLoad: function() { CKEDITOR.addCss( '.cke_upload_uploading img{' + 'opacity: 0.3' + '}' ); }, init: function( editor ) { // Do not execute this paste listener if it will not be possible to upload file. if ( !CKEDITOR.plugins.clipboard.isFileApiSupported ) { return; } var fileTools = CKEDITOR.fileTools, uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ); 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; } // Handle images which are available in the dataTransfer. fileTools.addUploadWidget( editor, 'uploadimage', { supportedTypes: /image\/(jpeg|png|gif|bmp)/, uploadUrl: uploadUrl, fileToElement: function() { var img = new CKEDITOR.dom.element( 'img' ); img.setAttribute( 'src', loadingImage ); return img; }, parts: { img: 'img' }, onUploading: function( upload ) { // Show the image during the upload. this.parts.img.setAttribute( 'src', upload.data ); }, onUploaded: function( upload ) { // Set width and height to prevent blinking. this.replaceWith( '<img src="' + upload.url + '" ' + 'width="' + this.parts.img.$.naturalWidth + '" ' + 'height="' + this.parts.img.$.naturalHeight + '">' ); } } ); // Handle images which are not available in the dataTransfer. // This means that we need to read them from the <img src="data:..."> elements. editor.on( 'paste', function( evt ) { // For performance reason do not parse data if it does not contain img tag and data attribute. if ( !evt.data.dataValue.match( /<img[\s\S]+data:/i ) ) { return; } var data = evt.data, // Prevent XSS attacks. tempDoc = document.implementation.createHTMLDocument( '' ), temp = new CKEDITOR.dom.element( tempDoc.body ), imgs, img, i; // Without this isReadOnly will not works properly. temp.data( 'cke-editable', 1 ); temp.appendHtml( data.dataValue ); imgs = temp.find( 'img' ); for ( i = 0; i < imgs.count(); i++ ) { img = imgs.getItem( i ); // Image have to contain src=data:... var isDataInSrc = img.getAttribute( 'src' ) && img.getAttribute( 'src' ).substring( 0, 5 ) == 'data:', isRealObject = img.data( 'cke-realelement' ) === null; // We are not uploading images in non-editable blocs and fake objects (#13003). if ( isDataInSrc && isRealObject && !img.data( 'cke-upload-id' ) && !img.isReadOnly( 1 ) ) { var loader = editor.uploadRepository.create( img.getAttribute( 'src' ) ); loader.upload( uploadUrl ); fileTools.markElement( img, 'uploadimage', loader.id ); fileTools.bindNotifications( editor, loader ); } } data.dataValue = temp.getHtml(); } ); } } ); // jscs:disable maximumLineLength // Black rectangle which is shown before image is loaded. var loadingImage = 'data:image/gif;base64,R0lGODlhDgAOAIAAAAAAAP///yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs='; // jscs:enable maximumLineLength /** * The URL where images should be uploaded. * * @since 4.5 * @cfg {String} [imageUploadUrl='' (empty string = disabled)] * @member CKEDITOR.config */ } )();