+1
Completed

Filepicker..

lookingdown 3 months ago in Feature requests • updated by Vlad R 1 week ago 8

Hello..

Thanks for a fantastic filemanager..

Would it be possible to use Filerun as a filepicker...?  now I use filerun for to manage all files metadata image titles and descriptions and so on.. and most uploads as well for users in case other upload mechanism files are indexed passing your cli script.. And for filepicker we are using Responsive filemanager... 2 different filemanagers.. :( ..

Now.. would it be possible to use FIlerun as a filepicker.. ? Have any ideas or instructions on how to implement..

Cheers

Answer

Answer
Started

Ok, so here it is:


1. Create the file "js/tinymce.plugin.js" inside the FileRun installation folder. Paste the following inside:

tinymce.PluginManager.add("filerun", function(editor) {
    function filerun_onMessage(event) {
        if(editor.settings.external_plugins.filerun.toLowerCase().indexOf(event.origin.toLowerCase()) === 0){
            if(event.data.sender === 'FileRun'){
                tinymce.activeEditor.insertContent(event.data.html);
                tinymce.activeEditor.windowManager.close();
                window.removeEventListener('message', filerun_onMessage, false);
            }
        }
    }
    function openFileRun() {
        var width = window.innerWidth - 20;
        var height = window.innerHeight - 40;
        if (width > 1800) {width = 1800;}
        if (height > 1200) {height = 1200;}
        if (width > 600) {
            var width_reduce = (width - 20) % 138;
            width = width - width_reduce + 10;
        }
        window.addEventListener("message", filerun_onMessage, false);
        var baseURL = editor.settings.external_plugins.filerun.replace('js/tinymce.plugin.js', '');
        editor.windowManager.open({
            title: editor.settings.filerun.window_title || "FileRun",
            file: baseURL,
            width: width, height: height,
            inline: true, resizable: false, maximizable: false
        });
    }
    editor.addShortcut("Ctrl+E", "", openFileRun);
    editor.addMenuItem("filerun", {
        icon: "browse",
        text: editor.settings.filerun.button_title || 'Insert file',
        shortcut: "Ctrl+E",
        onclick: openFileRun,
        context: "insert"
    });
});


2. Initialize your TinyMCE editor like this:

tinymce.init({
    selector:'textarea',
    plugins: 'image link filerun',
    filerun: {
        window_title: 'Insert File Path',
        button_title: 'Insert some file'
    },
    external_plugins: {
        'filerun': 'http://FILERUN-URL/js/tinymce.plugin.js'
    }
});

Step-by-step:

a) Add the "external_plugins" part. Replace "http://FileRun-URL/" with your actual URL.

b) Add "filerun" to the list of plugins.

c) Optional: the "filerun" settings are not mandatory


3. Create the file "customizables/plugins/tinymce_filepicker/app.php" inside your FileRun installation folder (Note: requires creating the empty folder "tinymce_filepicker".) Paste the following inside:


<?php
class custom_tinymce_filepicker extends \FileRun\Files\Plugin {
    static $localeSection = 'Custom Actions';
    function init() {
        $this->JSconfig = [
            "title" => self::t('Insert to TinyMCE'),
            'iconCls' => 'fa fa-fw fa-reply-all',
            'popup' => true
        ];
    }
    function isDisabled() {
        return !\FileRun\Perms::isSuperUser();
    }
    function run() {
        $pathInfo = \FileRun\Files\Utils::getPathInfo($this->data['relativePath']);
        $fullPath = $pathInfo['fullPath'];
        ?>
        <script>
            if (!window.parent) {
                document.write('This plugin is designed to be used from withing a TinyMCE editor!');
            } else {
                with (window.parent) {
                    window.parent.postMessage({
                        sender: 'FileRun',
                        html: '<?php echo \S::safeJS(\S::forHTML($fullPath));?>'
                    }, '*');
                }
            }
        </script>
    <?php
    }
}


How to use:


1. Clear your browser's cache.

2. Open your TinyMCE editor.

3. Select "Insert" -> "Insert some file"

4. A popup will open with FileRun

5. Browse to your desired file, right-click it and select "Open with.." -> "Insert to TinyMCE"


The FileRun popup will close and the absolute filesystem path of the selected file will be inserted in the editor.


Note: The FileRun "Insert to TinyMCE" plugin will be available only to the superuser. If you wish to change that, remove the entire "isDisabled" function from the code.

Under review

If you tell me how you use the filepicker I will try to find a solution for you. Do you use a particular WYSIWYG editor?

Thanks.. a lot!

I am using tinymce with responsive filemaneger and also responsive filemanager as a filepicker for text file input standalone with callback from responsivefilemanager that inserts the file url in the text field.. 

This is how i call Filerun:


<span class="text-success"><b><!--?php echo $g_name;?--></b></span><span class="float-right" target="_blank" onclick="galeria = 'autologin.php?folder=https://<?php echo $_SERVER['SERVER_NAME'] ?>/pastas/#/HOME/data/galerias'; newWindow(this);  return false;" data-toggle="tooltip" data-html="true" title="Bate aqui para criar Titulos e descripcoes para acompanhar a foto!"><button type="button" class="btn btn-primary"></button>Criar/Ajeitar galerias</span>



JS


function newWindow(element) {
  var newWin = window.open(galeria, 'window-name', "top=0, left=50%, height=700,width=980,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
}

Close window-popup and return fileurl would be desireable.. :) ..


Hope its not to much information.. :) 


Tinymce is quite well documented 

Have at least these options

external_filemanager_path: '/filemanager/',
external_plugins: { 'filemanager' : '/filemanager/plugin.min.js'}


Responsive filemanager Tinymce Plugin: https://github.com/trippo/ResponsiveFilemanager



I see you are using a predefined user account with autologin. Would you prefer to keep this way, or would you rather have FileRun automatically create a weblink of the selected file, or folder, and use that instead? With the later option you wouldn't be limited to a particular FileRun account. Also, you would be able to get a direct download for a file, or use to actually embed a photo.

The it works is very good, the user used with autologin is the current logged in user in user (session variable) and thats the desired and seemingly optimal way to work for me as the files / file urls used are of the file system, not filerun.

Filerun is used to maintain all media, add meta info such as title and description and organize folder structures..

The CMS (homerolled) with focus on creative media capabilities does not know of filerun otherwise.. most of the images are processed by a php script that resize and caches them according to use.. I pass directory/imagefile.(jpg|png) to it,  not sure a weblink would work... basically I need to return the file url absolute (df_paths.path) to form input field for use in the cms..


And for TinyMce the same return path.. 


:) Thanks again..

Answer
Started

Ok, so here it is:


1. Create the file "js/tinymce.plugin.js" inside the FileRun installation folder. Paste the following inside:

tinymce.PluginManager.add("filerun", function(editor) {
    function filerun_onMessage(event) {
        if(editor.settings.external_plugins.filerun.toLowerCase().indexOf(event.origin.toLowerCase()) === 0){
            if(event.data.sender === 'FileRun'){
                tinymce.activeEditor.insertContent(event.data.html);
                tinymce.activeEditor.windowManager.close();
                window.removeEventListener('message', filerun_onMessage, false);
            }
        }
    }
    function openFileRun() {
        var width = window.innerWidth - 20;
        var height = window.innerHeight - 40;
        if (width > 1800) {width = 1800;}
        if (height > 1200) {height = 1200;}
        if (width > 600) {
            var width_reduce = (width - 20) % 138;
            width = width - width_reduce + 10;
        }
        window.addEventListener("message", filerun_onMessage, false);
        var baseURL = editor.settings.external_plugins.filerun.replace('js/tinymce.plugin.js', '');
        editor.windowManager.open({
            title: editor.settings.filerun.window_title || "FileRun",
            file: baseURL,
            width: width, height: height,
            inline: true, resizable: false, maximizable: false
        });
    }
    editor.addShortcut("Ctrl+E", "", openFileRun);
    editor.addMenuItem("filerun", {
        icon: "browse",
        text: editor.settings.filerun.button_title || 'Insert file',
        shortcut: "Ctrl+E",
        onclick: openFileRun,
        context: "insert"
    });
});


2. Initialize your TinyMCE editor like this:

tinymce.init({
    selector:'textarea',
    plugins: 'image link filerun',
    filerun: {
        window_title: 'Insert File Path',
        button_title: 'Insert some file'
    },
    external_plugins: {
        'filerun': 'http://FILERUN-URL/js/tinymce.plugin.js'
    }
});

Step-by-step:

a) Add the "external_plugins" part. Replace "http://FileRun-URL/" with your actual URL.

b) Add "filerun" to the list of plugins.

c) Optional: the "filerun" settings are not mandatory


3. Create the file "customizables/plugins/tinymce_filepicker/app.php" inside your FileRun installation folder (Note: requires creating the empty folder "tinymce_filepicker".) Paste the following inside:


<?php
class custom_tinymce_filepicker extends \FileRun\Files\Plugin {
    static $localeSection = 'Custom Actions';
    function init() {
        $this->JSconfig = [
            "title" => self::t('Insert to TinyMCE'),
            'iconCls' => 'fa fa-fw fa-reply-all',
            'popup' => true
        ];
    }
    function isDisabled() {
        return !\FileRun\Perms::isSuperUser();
    }
    function run() {
        $pathInfo = \FileRun\Files\Utils::getPathInfo($this->data['relativePath']);
        $fullPath = $pathInfo['fullPath'];
        ?>
        <script>
            if (!window.parent) {
                document.write('This plugin is designed to be used from withing a TinyMCE editor!');
            } else {
                with (window.parent) {
                    window.parent.postMessage({
                        sender: 'FileRun',
                        html: '<?php echo \S::safeJS(\S::forHTML($fullPath));?>'
                    }, '*');
                }
            }
        </script>
    <?php
    }
}


How to use:


1. Clear your browser's cache.

2. Open your TinyMCE editor.

3. Select "Insert" -> "Insert some file"

4. A popup will open with FileRun

5. Browse to your desired file, right-click it and select "Open with.." -> "Insert to TinyMCE"


The FileRun popup will close and the absolute filesystem path of the selected file will be inserted in the editor.


Note: The FileRun "Insert to TinyMCE" plugin will be available only to the superuser. If you wish to change that, remove the entire "isDisabled" function from the code.

Is there something similar for Summernote or Redactor?


Thank you in advance!

I can try to write something up. Absolute file path, or FileRun WebLink URL?

Completed

A FileRun update is now available for installation. It includes integration with TinyMCE. Read more about this feature here: http://docs.filerun.com/tinymce

For installing updates, please use this guide: https://docs.filerun.com/updating