Merge pull request #248 from fabrixxm/tmcefilebrowser
TinyMCE file browser
This commit is contained in:
		
				commit
				
					
						44f4b4b9d1
					
				
			
		
					 4 changed files with 212 additions and 2 deletions
				
			
		
							
								
								
									
										28
									
								
								js/main.js
									
										
									
									
									
								
							
							
						
						
									
										28
									
								
								js/main.js
									
										
									
									
									
								
							|  | @ -17,6 +17,7 @@ | |||
|   } | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 	var src = null; | ||||
| 	var prev = null; | ||||
| 	var livetime = null; | ||||
|  | @ -558,12 +559,36 @@ function notifyMarkAll() { | |||
| } | ||||
| 
 | ||||
| 
 | ||||
| // code from http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser
 | ||||
| function fcFileBrowser (field_name, url, type, win) { | ||||
|     /* TODO: If you work with sessions in PHP and your client doesn't accept cookies you might need to carry | ||||
|        the session name and session ID in the request string (can look like this: "?PHPSESSID=88p0n70s9dsknra96qhuk6etm5"). | ||||
|        These lines of code extract the necessary parameters and add them back to the filebrowser URL again. */ | ||||
| 
 | ||||
| 
 | ||||
|     var cmsURL = baseurl+"/fbrowser/"+type+"/"; | ||||
| 
 | ||||
|     tinyMCE.activeEditor.windowManager.open({ | ||||
|         file : cmsURL, | ||||
|         title : 'File Browser', | ||||
|         width : 420,  // Your dimensions may differ - toy around with them!
 | ||||
|         height : 400, | ||||
|         resizable : "yes", | ||||
|         inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
 | ||||
|         close_previous : "no" | ||||
|     }, { | ||||
|         window : win, | ||||
|         input : field_name | ||||
|     }); | ||||
|     return false; | ||||
|   } | ||||
| 
 | ||||
| function setupFieldRichtext(){ | ||||
| 	tinyMCE.init({ | ||||
| 		theme : "advanced", | ||||
| 		mode : "specific_textareas", | ||||
| 		editor_selector: "fieldRichtext", | ||||
| 		plugins : "bbcode,paste", | ||||
| 		plugins : "bbcode,paste, inlinepopups", | ||||
| 		theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code", | ||||
| 		theme_advanced_buttons2 : "", | ||||
| 		theme_advanced_buttons3 : "", | ||||
|  | @ -580,6 +605,7 @@ function setupFieldRichtext(){ | |||
| 		convert_urls: false, | ||||
| 		content_css: baseurl+"/view/custom_tinymce.css", | ||||
| 		theme_advanced_path : false, | ||||
| 		file_browser_callback : "fcFileBrowser", | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
|  |  | |||
							
								
								
									
										99
									
								
								mod/fbrowser.php
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										99
									
								
								mod/fbrowser.php
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,99 @@ | |||
| <?php | ||||
| /** | ||||
|  * @package		Friendica\modules | ||||
|  * @subpackage	FileBrowser | ||||
|  * @author		Fabio Comuni <fabrixxm@kirgroup.com> | ||||
|  */ | ||||
|   | ||||
| /** | ||||
|  * @param App $a | ||||
|  */ | ||||
| function fbrowser_content($a){ | ||||
| 	 | ||||
| 	if (!local_user()) | ||||
| 		killme(); | ||||
| 
 | ||||
| 	if ($a->argc==1) | ||||
| 		killme(); | ||||
| 	 | ||||
| 	//echo "<pre>"; var_dump($a->argv); killme();	
 | ||||
| 	 | ||||
| 	switch($a->argv[1]){ | ||||
| 		case "image": | ||||
| 			$path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos"))); | ||||
| 			$albums = false; | ||||
| 			$sql_extra = ""; | ||||
| 			$sql_extra2 = " ORDER BY created DESC LIMIT 0, 10"; | ||||
| 			 | ||||
| 			if ($a->argc==2){ | ||||
| 				$albums = q("SELECT distinct(`album`) AS `album` FROM `photo` WHERE `uid` = %d ", | ||||
| 					intval(local_user()) | ||||
| 				); | ||||
| 				// anon functions only from 5.3.0... meglio tardi che mai..
 | ||||
| 				function folder1($el){return array(bin2hex($el['album']),$el['album']);}	 | ||||
| 				$albums = array_map( "folder1" , $albums); | ||||
| 				 | ||||
| 			} | ||||
| 			 | ||||
| 			$album = ""; | ||||
| 			if ($a->argc==3){ | ||||
| 				$album = hex2bin($a->argv[2]); | ||||
| 				$sql_extra = sprintf("AND `album` = '%s' ",dbesc($album)); | ||||
| 				$sql_extra2 = ""; | ||||
| 				$path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album); | ||||
| 			} | ||||
| 				 | ||||
| 			$r = q("SELECT `resource-id`, `id`, `filename`, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`  
 | ||||
| 					FROM `photo` WHERE `uid` = %d $sql_extra | ||||
| 					GROUP BY `resource-id` $sql_extra2",
 | ||||
| 				intval(local_user())					 | ||||
| 			); | ||||
| 			 | ||||
| 			 | ||||
| 			function files1($rr){ global $a; return array( $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['hiq'] . '.jpg', template_escape($rr['filename']), $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['loq'] . '.jpg');  } | ||||
| 			$files = array_map("files1", $r); | ||||
| 			 | ||||
| 			$tpl = get_markup_template("filebrowser.tpl"); | ||||
| 			echo replace_macros($tpl, array( | ||||
| 				'$type' => 'image', | ||||
| 				'$baseurl' => $a->get_baseurl(), | ||||
| 				'$path' => $path, | ||||
| 				'$folders' => $albums, | ||||
| 				'$files' =>$files, | ||||
| 			)); | ||||
| 				 | ||||
| 				 | ||||
| 			break; | ||||
| 		case "file": | ||||
| 			if ($a->argc==2){ | ||||
| 				$files = q("SELECT id, filename, filetype FROM `attach` WHERE `uid` = %d ", | ||||
| 					intval(local_user()) | ||||
| 				); | ||||
| 				 | ||||
| 				function files2($rr){ global $a;  | ||||
| 					list($m1,$m2) = explode("/",$rr['filetype']); | ||||
| 					$filetype = ( (file_exists("images/icons/$m1.png"))?$m1:"zip"); | ||||
| 					return array( $a->get_baseurl() . '/attach/' . $rr['id'], template_escape($rr['filename']), $a->get_baseurl() . '/images/icons/16/' . $filetype . '.png');  | ||||
| 				} | ||||
| 				$files = array_map("files2", $files); | ||||
| 				//echo "<pre>"; var_dump($files); killme();
 | ||||
| 			 | ||||
| 							 | ||||
| 				$tpl = get_markup_template("filebrowser.tpl"); | ||||
| 				echo replace_macros($tpl, array( | ||||
| 					'$type' => 'file', | ||||
| 					'$baseurl' => $a->get_baseurl(), | ||||
| 					'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ), | ||||
| 					'$folders' => false, | ||||
| 					'$files' =>$files, | ||||
| 				)); | ||||
| 				 | ||||
| 			} | ||||
| 		 | ||||
| 			break; | ||||
| 	} | ||||
| 	 | ||||
| 
 | ||||
| 	killme(); | ||||
| 	 | ||||
| } | ||||
							
								
								
									
										84
									
								
								view/filebrowser.tpl
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										84
									
								
								view/filebrowser.tpl
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,84 @@ | |||
| <!DOCTYPE html> | ||||
| <html> | ||||
| 	<head> | ||||
| 	<script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script> | ||||
| 	<style> | ||||
| 		.panel_wrapper div.current{.overflow: auto; height: auto!important; } | ||||
| 		.filebrowser.path { font-family: fixed; font-size: 10px; background-color: #f0f0ee; height:auto; overflow:auto;} | ||||
| 		.filebrowser.path a { border-left: 1px solid #C0C0AA; background-color: #E0E0DD; display: block; float:left; padding: 0.3em 1em;} | ||||
| 		.filebrowser ul{ list-style-type: none; padding:0px; } | ||||
| 		.filebrowser.folders a { display: block; padding: 0.3em } | ||||
| 		.filebrowser.folders a:hover { background-color: #f0f0ee; } | ||||
| 		.filebrowser.files.image { overflow: auto; height: auto; } | ||||
| 		.filebrowser.files.image img { height:50px;} | ||||
| 		.filebrowser.files.image li { display: block; padding: 5px; float: left; } | ||||
| 		.filebrowser.files.image span { display: none;} | ||||
| 		.filebrowser.files.file img { height:16px; vertical-align: bottom;} | ||||
| 		.filebrowser.files a { display: block;  padding: 0.3em} | ||||
| 		.filebrowser.files a:hover { background-color: #f0f0ee; } | ||||
| 		.filebrowser a { text-decoration: none; } | ||||
| 	</style> | ||||
| 	<script> | ||||
| 		var FileBrowserDialogue = { | ||||
| 			init : function () { | ||||
| 				// Here goes your code for setting your custom things onLoad. | ||||
| 			}, | ||||
| 			mySubmit : function (URL) { | ||||
| 				//var URL = document.my_form.my_field.value; | ||||
| 				var win = tinyMCEPopup.getWindowArg("window"); | ||||
| 
 | ||||
| 				// insert information now | ||||
| 				win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL; | ||||
| 
 | ||||
| 				// are we an image browser | ||||
| 				if (typeof(win.ImageDialog) != "undefined") { | ||||
| 					// we are, so update image dimensions... | ||||
| 					if (win.ImageDialog.getImageData) | ||||
| 						win.ImageDialog.getImageData(); | ||||
| 
 | ||||
| 					// ... and preview if necessary | ||||
| 					if (win.ImageDialog.showPreviewImage) | ||||
| 						win.ImageDialog.showPreviewImage(URL); | ||||
| 				} | ||||
| 
 | ||||
| 				// close popup window | ||||
| 				tinyMCEPopup.close(); | ||||
| 			} | ||||
| 		} | ||||
| 
 | ||||
| 		tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue); | ||||
| 	</script> | ||||
| 	</head> | ||||
| 	<body> | ||||
| 	 | ||||
| 	<div class="tabs"> | ||||
| 		<ul > | ||||
| 			<li class="current"><span>FileBrowser</span></li> | ||||
| 		</ul> | ||||
| 	</div> | ||||
| 	<div class="panel_wrapper"> | ||||
| 
 | ||||
| 		<div id="general_panel" class="panel current"> | ||||
| 			<div class="filebrowser path"> | ||||
| 				{{ for $path as $p }}<a href="$p.0">$p.1</a>{{ endfor }} | ||||
| 			</div> | ||||
| 			<div class="filebrowser folders"> | ||||
| 				<ul> | ||||
| 					{{ for $folders as $f }}<li><a href="$f.0/">$f.1</a></li>{{ endfor }} | ||||
| 				</ul> | ||||
| 			</div> | ||||
| 			<div class="filebrowser files $type"> | ||||
| 				<ul> | ||||
| 				{{ for $files as $f }} | ||||
| 					<li><a href="#" onclick="FileBrowserDialogue.mySubmit('$f.0'); return false;"><img src="$f.2"><span>$f.1</span></a></li> | ||||
| 				{{ endfor }} | ||||
| 				</ul> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	<div class="mceActionPanel"> | ||||
| 		<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" /> | ||||
| 	</div>	 | ||||
| 	</body> | ||||
| 	 | ||||
| </html> | ||||
|  | @ -26,7 +26,7 @@ function initEditor(cb){ | |||
| 			mode : "specific_textareas", | ||||
| 			editor_selector: $editselect, | ||||
| 			auto_focus: "profile-jot-text", | ||||
| 			plugins : "bbcode,paste,autoresize", | ||||
| 			plugins : "bbcode,paste,autoresize, inlinepopups", | ||||
| 			theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code", | ||||
| 			theme_advanced_buttons2 : "", | ||||
| 			theme_advanced_buttons3 : "", | ||||
|  | @ -44,6 +44,7 @@ function initEditor(cb){ | |||
| 			convert_urls: false, | ||||
| 			content_css: "$baseurl/view/custom_tinymce.css", | ||||
| 			theme_advanced_path : false, | ||||
| 			file_browser_callback : "fcFileBrowser", | ||||
| 			setup : function(ed) { | ||||
| 				cPopup = null; | ||||
| 				ed.onKeyDown.add(function(ed,e) { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue