tinymce: add filebrowser for photos and attached files

This commit is contained in:
Fabio Comuni 2012-04-18 13:23:42 +02:00
parent 1b6c84d8f4
commit e2e6b56c44
4 changed files with 192 additions and 0 deletions

View file

@ -17,6 +17,7 @@
}
var src = null;
var prev = null;
var livetime = null;
@ -558,6 +559,30 @@ 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",
@ -580,6 +605,7 @@ function setupFieldRichtext(){
convert_urls: false,
content_css: baseurl+"/view/custom_tinymce.css",
theme_advanced_path : false,
file_browser_callback : "fcFileBrowser",
});
}

100
mod/fbrowser.php Normal file
View file

@ -0,0 +1,100 @@
<?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":
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);
$tpl = get_markup_template("filebrowser.tpl");
echo replace_macros($tpl, array(
'$type' => 'image',
'$baseurl' => $a->get_baseurl(),
'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Photos"))),
'$folders' => $albums,
'$files' =>false,
));
}
if ($a->argc==3){
$album = hex2bin($a->argv[2]);
$r = q("SELECT `resource-id`, `id`, `filename`, min(`scale`) AS `scale`, `desc` FROM `photo` WHERE `uid` = %d AND `album` = '%s'
AND `scale` <= 4 $sql_extra GROUP BY `resource-id`",
intval(local_user()),
dbesc($album)
);
function files1($rr){ global $a; return array( $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['scale'] . '.jpg', template_escape($rr['filename']), $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['scale'] . '.jpg'); }
$files = array_map("files1", $r);
$tpl = get_markup_template("filebrowser.tpl");
echo replace_macros($tpl, array(
'$type' => 'image',
'$baseurl' => $a->get_baseurl(),
'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")),
array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album)),
'$folders' => false,
'$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();
}

65
view/filebrowser.tpl Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<style>
.filebrowser.path { font-family: fixed; font-size: 10px;}
.filebrowser ul{ list-style-type: none; padding:0px; }
.filebrowser.files 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;}
.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="filebrowser path">
&gt; {{ 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>
<form>
<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>
</form>
</body>
</html>

View file

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