Merge pull request #248 from fabrixxm/tmcefilebrowser

TinyMCE file browser
This commit is contained in:
fabrixxm 2012-04-19 00:30:45 -07:00
commit 44f4b4b9d1
4 changed files with 212 additions and 2 deletions

View file

@ -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
View 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
View 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>

View file

@ -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) {