Full plugin

uploadcare · Dec 17, 2012 · 9e4cfc8 · 9e4cfc8
1 parent 31716e9
commit 9e4cfc8
Show file tree

Hide file tree

Showing 10 changed files with 334 additions and 2 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "uploadcare-php"]
+	path = uploadcare-php
+	url = git://github.com/uploadcare/uploadcare-php.git
diff --git a/README.md b/README.md
@@ -1,2 +1,44 @@
-uploadcare-tinymce
-==================
+# Uploadcare TinyMCE Plugin
+
+This is a module for [TinyMCE][4] to work with [Uploadcare][1].
+
+It's based on a [uploadcare-php][3] library.
+
+## Requirements
+
+- TinyMCE 3.5+
+- PHP 5.2+
+
+## Install
+
+Clone plugin from git to your plugins directory:
+
+    git clone git://github.com/uploadcare/uploadcare-tinymce.git plugins/uploadcare --recursive
+
+Find a "config.php" file inside plugin directory and edit it:
+
+    <?php
+    define('UC_PUBLIC_KEY', 'demopublickey');
+    define('UC_SECRET_KEY', 'demoprivatekey');
+
+Add a plugin and plugin button when initializing TinyMCE:
+
+    tinyMCE.init({
+      ....
+      plugins : "uploadcare,..."
+      ....
+      theme_advanced_buttons1 : "uploadcare,save,..."
+      ....
+
+## Usage
+
+1. Press "Uploadcare" button.
+2. Select a file to upload.
+3. Press "Store".
+4. Change any parameters you like.
+5. Press "Insert" and an image will be available inside editor.
+
+[1]: http://uploadcare.com/
+[2]: https://uploadcare.com/documentation/reference/basic/cdn.html
+[3]: https://github.com/uploadcare/uploadcare-php
+[4]: http://www.tinymce.com/
diff --git a/config.php b/config.php
@@ -0,0 +1,3 @@
+<?php
+define('UC_PUBLIC_KEY', 'demopublickey');
+define('UC_SECRET_KEY', 'demoprivatekey');
diff --git a/dialog.php b/dialog.php
@@ -0,0 +1,218 @@
+<?php
+error_reporting(E_ERROR);
+include dirname(__FILE__).'/config.php';
+include dirname(__FILE__).'/uploadcare-php/uploadcare/lib/5.2/Uploadcare.php';
+
+$public_key = UC_PUBLIC_KEY;
+$secret_key = UC_SECRET_KEY;
+$api = new Uploadcare_Api($public_key, $secret_key);
+//POST
+$file = null;
+$scale_crop_default_width = 800;
+$scale_crop_default_height = 634;
+if ($_POST['save']) {
+	$file_id = $_POST['file_id'];
+	$file = $api->getFile($file_id);
+	$file->scaleCrop($scale_crop_default_width, $scale_crop_default_height);
+	$file->op('stretch/off');
+	$file->store();
+}
+if ($_GET['file_id']) {
+	$file_id = $_GET['file_id'];
+	$file = $api->getFile($file_id);
+	$file->scaleCrop($scale_crop_default_width, $scale_crop_default_height);
+	$file->op('stretch/off');
+	$file->store();
+}
+$is_insert = false;
+$is_preview = false;
+if ($_POST['insert'] or $_POST['_preview']) {
+	$file_id = $_POST['file_id'];
+	$file = $api->getFile($file_id);
+	$original = clone $file;
+
+	if (isset($_POST['crop'])) {
+		$crop_width = $_POST['crop_width'];
+		$crop_height = $_POST['crop_height'];
+		$crop_center = isset($_POST['crop_center']) ? true : false;
+		$crop_fill_color = $_POST['crop_fill_color'];
+		$file = $file->crop($crop_width, $crop_height, $crop_center, $crop_fill_color);
+	}
+
+	if (isset($_POST['resize'])) {
+		$resize_width = $_POST['resize_width'];
+		$resize_height = $_POST['resize_height'];
+		$file = $file->resize($resize_width, $resize_height);
+	}
+
+	if (isset($_POST['scale_crop'])) {
+		$scale_crop_width = $_POST['scale_crop_width'];
+		$scale_crop_height = $_POST['scale_crop_height'];
+		$scale_crop_center = isset($_POST['scale_crop_center']) ? true : false;
+		$file = $file->scaleCrop($scale_crop_width, $scale_crop_height, $scale_crop_center);
+	} else {
+		$scale_crop_width = $scale_crop_default_width;
+		$scale_crop_height = $scale_crop_default_height;
+		$scale_crop_center = false;
+	}
+
+	if (isset($_POST['effect_flip'])) {
+		$file = $file->effect('flip');
+	}
+
+	if (isset($_POST['effect_grayscale'])) {
+		$file = $file->effect('grayscale');
+	}
+
+	if (isset($_POST['effect_invert'])) {
+		$file = $file->effect('invert');
+	}
+
+	if (isset($_POST['effect_mirror'])) {
+		$file = $file->effect('mirror');
+	}
+
+	if (isset($_POST['stretch_off'])) {
+		$file->op('stretch/off');
+	}
+
+	$is_insert = true;
+
+	if ($_POST['_preview']) {
+		$is_insert = false;
+		$is_preview = true;
+	}
+}
+
+?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Uploadcare</title>
+	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
+	<script type="text/javascript" src="uploadcare.js"></script>
+</head>
+<body style="display: none" role="application" aria-labelledby="app_title">
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript">
+        google.load("jquery", "1.7");
+</script>
+<?php if ($is_preview): ?>
+<?php echo $file->getImgTag($file->data['original_filename']); ?>
+<?php die();?>
+<?php endif;?>
+<?php if ($is_insert): ?>
+<script type="text/javascript">
+/* <![CDATA[ */
+UploadcareDialog.insert('<?php echo $file->getUrl(); ?>');      
+/* ]]> */
+</script>
+<?php die();?>
+<?php endif;?>
+
+<?php if ($file): ?>
+<div id="media-items">
+<div class="media-item">
+<form enctype="multipart/form-data" method="post" action="" id="uploadcare_form">
+	<input type="hidden" name="file_id" id="file_id" value="<?php echo $file_id; ?>" />
+
+
+	<table class="slidetoggle describe startclosed" style="display: table;">
+		<thead class="media-item-info">
+		<tr>
+			<td colspan="2">
+				<p><strong>File name:</strong> <?php echo $file->data['original_filename']; ?></p>
+				<p><strong>File type:</strong> <?php echo $file->data['mime_type']; ?></p>
+				<p><strong>Upload date:</strong> <?php echo $file->data['upload_date']; ?></p>
+			</td>
+		</tr>
+		</thead>
+		<tbody>
+
+			<tr align="left">
+				<td colspan="2"><input type="checkbox" name="crop" id="crop" />&nbsp;<strong><label for="crop">Crop</label></strong></td>
+			</tr>
+			<tr align="left"><th class="label"><label for="crop_width">Width:</label></th><td><input type="text" name="crop_width" id="crop_width" /></td></tr>
+			<tr align="left"><th class="label"><label for="crop_height">Height:</label></th><td><input type="text" name="crop_height" id="crop_height" /></td></tr>
+			<tr align="left"><th class="label"><label for="crop_center">Center:</label></th><td><input type="checkbox" name="crop_center" id="crop_center" /></td></tr>
+			<tr align="left"><th class="label"><label for="crop_fill_color">Fill color:</label></th><td><input type="text" name="crop_fill_color" id="crop_fill_color" /></td></tr>
+
+			<tr align="left">
+				<td colspan="2"><input type="checkbox" name="resize" id="resize" />&nbsp;<strong><label for="resize">Resize</label></strong></td>
+			</tr>
+			<tr align="left"><th class="label"><label for="resize_width">Width:</label></th><td><input type="text" name="resize_width" id="resize_width" /></td></tr>
+			<tr align="left"><th class="label"><label for="resize_height">Height:</label></th><td><input type="text" name="resize_height" id="resize_height" /></td></tr>	
+
+			<tr align="left">
+				<td colspan="2"><input type="checkbox" name="scale_crop" checked="checked" id="scale_crop" />&nbsp;<strong><label for="scale_crop">Scale crop</label></strong></td>
+			</tr>
+			<tr align="left"><th class="label"><label for="scale_crop_width">Width:</label></th><td><input type="text" name="scale_crop_width" id="scale_crop_width" value="<?php echo $scale_crop_default_width;?>" /></td></tr>
+			<tr align="left"><th class="label"><label for="scale_crop_height">Height:</label></th><td><input type="text" name="scale_crop_height" id="scale_crop_height" value="<?php echo $scale_crop_default_height; ?>" /></td></tr>
+			<tr align="left"><th class="label"><label for="scale_crop_center">Center:</label></th><td><input type="checkbox" name="scale_crop_center" id="scale_crop_center" checked="checked"/></td></tr>
+
+			<tr align="left">
+				<td colspan="2"><strong>Effects</strong></td>
+			</tr>
+			<tr align="left"><th class="label" colspan="2"><input type="checkbox" name="effect_flip" id="effect_flip" />&nbsp;<label for="effect_flip">Flip</label></th></tr>
+			<tr align="left"><th class="label" colspan="2"><input type="checkbox" name="effect_grayscale" id="effect_grayscale" />&nbsp;<label for="effect_grayscale">Grayscale</label></th></tr>
+			<tr align="left"><th class="label" colspan="2"><input type="checkbox" name="effect_invert" id="effect_invert" />&nbsp;<label for="effect_invert">Invert</label></th></tr>
+			<tr align="left"><th class="label" colspan="2"><input type="checkbox" name="effect_mirror" id="effect_mirror" />&nbsp;<label for="effect_mirror">Mirror</label></th></tr>
+			<tr align="left"><th class="label" colspan="2"><input type="checkbox" name="stretch_off" id="stretch_off" checked="checked" />&nbsp;<label for="stretch">Stretch Off?</label></th></tr>
+
+
+			<tr valign="top">
+				<td class="A1B1" colspan="2">
+					<p><strong>Preview:</strong></p>
+					<div id="uploadcare_preview" style="width: 750px; overflow-x: scroll;">
+						<?php echo $file->getImgTag($file->data['original_filename']); ?>
+					</div>
+				</td>
+			</tr>			
+
+		</tbody>
+		</table>	
+		<input type="submit" value="Insert" name="insert" />
+</form>
+</div>
+</div>
+<script type="text/javascript">
+jQuery(function() {
+	jQuery('#uploadcare_form :input').change(function() {
+		var form = jQuery('#uploadcare_form');
+		var data = form.serialize();
+		data += '&_preview=true';
+		jQuery.post(
+				form.attr('action'),
+				data,
+				function (html) {
+					jQuery('#uploadcare_preview').html(html);
+				}
+		);
+		return false;
+	});
+});
+</script>
+<?php else: ?>
+<?php echo $api->widget->getScriptTag(); ?>
+<form enctype="multipart/form-data" method="post" action="" id="uploadcare_form">
+	<h3 class="media-title">Use Uploadcare widget to upload file.</h3>
+	<?php echo $api->widget->getInputTag('file_id'); ?>
+	<p class="savebutton ml-submit">
+	<input type="submit" value="Store File" name="save" />
+	</p>	
+</form>
+
+<script type="text/javascript">
+jQuery(function() {
+	jQuery('#uploadcare_form').submit(function() {
+		var form = jQuery(this);
+		var file_id = form.find('input[name=file_id]').val();
+		if (!file_id) {
+			return false; 
+		}
+	});
+});
+</script>
+<?php endif; ?>
+</body>
+</html>
diff --git a/editor_plugin.js b/editor_plugin.js
diff --git a/editor_plugin_src.js b/editor_plugin_src.js
@@ -0,0 +1,43 @@
+(function() {
+	var _uc_window;
+	tinymce.create('tinymce.plugins.UploadcarePlugin', {
+		init : function(ed, url) {
+			ed.addCommand('mceUploadcare', function() {
+				_uc_window = ed.windowManager.open({
+					file : url + '/dialog.php',
+					width : 800,
+					height : 600,
+					inline : 1
+				}, {
+					plugin_url : url
+				});
+			});
+
+			ed.addButton('uploadcare', {
+				title : 'Uploadcare',
+				cmd : 'mceUploadcare',
+				image : url + '/logo.png'
+			});
+
+			ed.onNodeChange.add(function(ed, cm, n) {
+				cm.setActive('uploadcare', n.nodeName == 'IMG');
+			});
+		},
+
+		createControl : function(n, cm) {
+			return null;
+		},
+
+		getInfo : function() {
+			return {
+				longname : 'Uploadcare',
+				author : 'Uploadcare',
+				authorurl : 'https://uploadcare.com/',
+				infourl : 'https://github.com/uploadcare/uploadcare-tinymce',
+				version : "1.0"
+			};
+		}
+	});
+
+	tinymce.PluginManager.add('uploadcare', tinymce.plugins.UploadcarePlugin);
+})();
diff --git a/logo.png b/logo.png
diff --git a/uploadcare-php b/uploadcare-php
diff --git a/uploadcare.js b/uploadcare.js
diff --git a/uploadcare_src.js b/uploadcare_src.js
@@ -0,0 +1,20 @@
+var UploadcareDialog = {
+	init : function(ed) {
+		tinyMCEPopup.resizeToInnerSize();
+	},
+
+	insert : function(file) {
+		var ed = tinyMCEPopup.editor, dom = ed.dom;
+
+		tinyMCEPopup.execCommand('mceInsertContent', false, dom.createHTML('img', {
+			src : file,
+			alt : '',
+			title : '',
+			border : 0
+		}));	
+
+		tinyMCEPopup.close();
+	}
+};
+
+tinyMCEPopup.onInit.add(UploadcareDialog.init, UploadcareDialog);