File upload plugin implemented as a toolbar command and added some multilanguage support. Completely removed the old FCKeditor from the source code.

2014-08-08 15:42:40 +02:00
parent 25ed9017de
commit 89d9f7a6ed
15 changed files with 149 additions and 307 deletions
@@ -1,83 +0,0 @@
-/**
- * The abbr dialog definition.
- *
- * Created out of the CKEditor Plugin SDK:
- * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
- */
-
-// Our dialog definition.
-CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
-	return {
-
-		// Basic properties of the dialog window: title, minimum size.
-		title: 'Abbreviation Properties',
-		minWidth: 400,
-		minHeight: 200,
-
-		// Dialog window contents definition.
-		contents: [
-			{
-				// Definition of the Basic Settings dialog tab (page).
-				id: 'tab-basic',
-				label: 'Basic Settings',
-
-				// The tab contents.
-				elements: [
-					{
-						// Text input field for the abbreviation text.
-						type: 'text',
-						id: 'abbr',
-						label: 'Abbreviation',
-
-						// Validation checking whether the field is not empty.
-						validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty" )
-					},
-					{
-						// Text input field for the abbreviation title (explanation).
-						type: 'text',
-						id: 'title',
-						label: 'Explanation',
-						validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty" )
-					}
-				]
-			},
-
-			// Definition of the Advanced Settings dialog tab (page).
-			{
-				id: 'tab-adv',
-				label: 'Advanced Settings',
-				elements: [
-					{
-						// Another text field for the abbr element id.
-						type: 'text',
-						id: 'id',
-						label: 'Id'
-					}
-				]
-			}
-		],
-
-		// This method is invoked once a user clicks the OK button, confirming the dialog.
-		onOk: function() {
-
-			// The context of this function is the dialog object itself.
-			// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
-			var dialog = this;
-
-			// Creates a new <abbr> element.
-			var abbr = editor.document.createElement( 'abbr' );
-
-			// Set element attribute and text, by getting the defined field values.
-			abbr.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
-			abbr.setText( dialog.getValueOf( 'tab-basic', 'abbr' ) );
-
-			// Now get yet another field value, from the advanced tab.
-			var id = dialog.getValueOf( 'tab-adv', 'id' );
-			if ( id )
-				abbr.setAttribute( 'id', id );
-
-			// Finally, inserts the element at the editor caret position.
-			editor.insertElement( abbr );
-		}
-	};
-});
@@ -0,0 +1,132 @@
+/**
+ * The abbr dialog definition.
+ *
+ * Created out of the CKEditor Plugin SDK:
+ * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
+ */
+
+// Our dialog definition.
+CKEDITOR.dialog.add( 'fileuploadDialog', function( editor ) {
+
+	var lang = editor.lang.image2;
+	console.log(editor.lang);
+	console.log(lang.btnUpload);
+
+	return {
+
+		// Basic properties of the dialog window: title, minimum size.
+		title: 'Upload file',
+		minWidth: 200,
+		minHeight: 150,
+
+		// Dialog window contents definition.
+		contents: [
+			{
+				// Definition of the Upload Settings dialog tab (page).
+				id: 'Upload',
+				label: lang.uploadTab,
+
+				// The tab contents.
+				elements: [
+					{
+						// File browser for selecting a file
+						type: 'file',
+						id: 'upload',
+						label: lang.btnUpload,
+						style: 'height:40px',
+					},
+					{
+						// Button for uploading the file.
+						type: 'fileButton',
+						id: 'uploadButton',
+						label: lang.btnUpload,
+					    onLoad: function( a ) {
+					        CKEDITOR.document.getById( this.domId ).on( 'click', function() {
+
+					        	// grab the file(s) from the file input tag and upload it using AJAX
+				            	var dialog = this.getDialog();
+            					var files = dialog.getContentElement("Upload", "upload").getInputElement().$.files;
+            					var formData = new FormData();
+            					formData.append('drop-count', files.length);		// number of files being uploaded
+            					formData.append('acmd', "Upload");			// Command for the server to recognize this as an ajax upload
+							    for (var i = 0; i < files.length; i++) {
+						    		formData.append('next_attachment', parent.next_attachment);
+						    		formData.append('encoding', "HTML");
+						    		formData.append('attfile', files[i]);
+
+						    		// Remember the original name of the file in a hidden text field
+						    		dialog.getContentElement( 'Upload', 'name' ).setValue( files[i].name );
+				    			}
+
+				    			var URL = '/' + parent.logbook + '/upload.html?next_attachment=' + parent.next_attachment;
+
+								$.ajax({
+								  xhr: function()
+								  {
+								    var xhr = new window.XMLHttpRequest();
+
+								    //Upload progress
+								    xhr.upload.addEventListener("progress", function(evt){
+								      if (evt.lengthComputable) {
+								        var percentComplete = evt.loaded / evt.total;
+								        //Do something with upload progress
+								        // console.log(percentComplete);
+								      }
+								    }, false);
+
+								    return xhr;
+								  },
+								  contentType: false,
+								  processData: false,
+								  type: 'POST',
+								  url: URL,
+								  data: formData,
+								  success: function(data) {
+            						dialog.getContentElement( 'Upload', 'src' ).setValue( data.attachments[0].fullName );
+								  },
+								  fail: function() {
+								  	console.log("error");
+								  }
+								});
+
+								// Do not call the built-in click command
+								return false;
+					        }, this );
+					    },
+						'for': [ 'Upload', 'upload' ]
+					},
+					{
+						// URL of the file
+						type: 'text',
+						id: 'src',
+						label: "URL",
+
+						// Validation checking whether the field is not empty.
+						validate: CKEDITOR.dialog.validate.notEmpty( "URL cannot be empty!" )
+					},
+					{
+						// Original name of the file, this field is hidden and only used to
+						// capture and display the original filename in the editor
+						type: 'text',
+						id: 'name',
+						hidden: true
+					}
+				]
+			}
+		],
+
+		// This method is invoked once a user clicks the OK button, confirming the dialog.
+		onOk: function() {
+            var dialog = this;
+
+            console.log(dialog.getValueOf( 'Upload', 'src' ));
+            console.log(dialog.getValueOf( 'Upload', 'name' ));
+
+            var file = editor.document.createElement( 'a' );
+            file.setAttribute( 'href', dialog.getValueOf( 'Upload', 'src' ) );
+            file.setText( dialog.getValueOf( 'Upload', 'name' ) );
+
+            editor.insertElement( file );
+		}
+	};
+});
@@ -6,32 +6,32 @@
 */

 // Register the plugin within the editor.
-CKEDITOR.plugins.add( 'abbr', {
+CKEDITOR.plugins.add( 'fileupload', {

 	// Register the icons.
-	icons: 'abbr',
+	icons: 'fileupload',

 	// The plugin initialization logic goes inside this method.
 	init: function( editor ) {

 		// Define an editor command that opens our dialog.
-		editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
+		editor.addCommand( 'fileupload', new CKEDITOR.dialogCommand( 'fileuploadDialog' ) );

 		// Create a toolbar button that executes the above command.
-		editor.ui.addButton( 'Abbr', {
+		editor.ui.addButton( 'FileUpload', {

 			// The text part of the button (if available) and tooptip.
-			label: 'Insert Abbreviation',
+			label: 'Upload a file',

 			// The command to execute on click.
-			command: 'abbr',
+			command: 'fileupload',

 			// The button placement in the toolbar (toolbar group name).
 			toolbar: 'insert'
 		});

 		// Register our dialog file. this.path is the plugin folder path.
-		CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
+		CKEDITOR.dialog.add( 'fileuploadDialog', this.path + 'dialogs/fileupload.js' );
 	}
 });