Change default ACE editor theme

[xata11]

Hello please I am finding it difficult to change the default theme on ACE editor, I want it to load Chrome as the default theme instead of Monokai.

I don't know which file to edit, please help me out.

[xata11]

From the client side it is okay no errors, but the themes that comes with ACE editor is Monokia by default.,

Is there any way to change the default theme to Chrome theme?

I want it to load the chrome theme by default, not until I change it from the client interface,

I want to change it via coding so it will save that way, so I don't have to be changing it on tge client side every time I want to edit my site. On Jul 26, 2019 1:06 PM, "Naoki Sawada" notifications@github.com wrote:

@xata11 https://github.com/xata11 When the display becomes necessary on elFinder, the client side issues a tmb command to request the connector side to create a thumbnail. It is such a mechanism to be able to create sequentially when there are a large number of image files.

If any errors occur on the client side, I think that the first decision is to identify the cause and correct it.

Does your integrated app intercept the DOM scrolling events?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Studio-42/elFinder/issues/2965?email_source=notifications&email_token=AKKZRUFFUQFPMJIV75TXDTDQBLSDRA5CNFSM4IGYN7SKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD24MLHA#issuecomment-515425692, or mute the thread https://github.com/notifications/unsubscribe-auth/AKKZRUH2JE65ZXS2FNDBGJTQBLSDRANCNFSM4IGYN7SA .

[nao-pon]

@xata11 You can use the 'editEditorPrepare' event hook.

elfinderInstance.bind('editEditorPrepare', function(e, fm){
    var data = e.data;
    if (data.id === 'aceeditor') {
        data.instance.setOptions({
            theme: 'ace/theme/chrome'
        });
    }
});

[xata11]

Please what file should I edit to place this code On Jul 26, 2019 2:28 PM, "Naoki Sawada" notifications@github.com wrote:

@xata11 https://github.com/xata11 You can use the 'editEditorPrepare' event hook.

elfinderInstance.bind('editEditorPrepare', function(e, fm){ var data = e.data; if (data.id === 'aceeditor') { data.instance.setOptions({ theme: 'ace/theme/chrome' }); } });

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Studio-42/elFinder/issues/2965?email_source=notifications&email_token=AKKZRUAC74VCE2DMDYV5IP3QBL3ZJA5CNFSM4IGYN7SKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD24SXRA#issuecomment-515451844, or mute the thread https://github.com/notifications/unsubscribe-auth/AKKZRUE3RR73RYV4IVGL6L3QBL3ZJANCNFSM4IGYN7SA .

[nao-pon]

@xata11 Please show your client configuration.

[xata11]

<?php

error_reporting(0); // Set E_ALL for debuging

// // To Enable(true) handling of PostScript files by ImageMagick
// // It is disabled by default as a countermeasure 
// // of Ghostscript multiple -dSAFER sandbox bypass vulnerabilities
// // see https://www.kb.cert.org/vuls/id/332928
// define('ELFINDER_IMAGEMAGICK_PS', true);
// ===============================================

// load composer autoload before load elFinder autoload If you need composer
//require './vendor/autoload.php';

// elFinder autoload
require './autoload.php';
// ===============================================

// Enable FTP connector netmount
elFinder::$netDrivers['ftp'] = 'FTP';
// ===============================================

// // Required for Dropbox network mount
// // Installation by composer
// // `composer require kunalvarma05/dropbox-php-sdk`
// // Enable network mount
// elFinder::$netDrivers['dropbox2'] = 'Dropbox2';
// // Dropbox2 Netmount driver need next two settings. You can get at https://www.dropbox.com/developers/apps
// // AND reuire regist redirect url to "YOUR_CONNECTOR_URL?cmd=netmount&protocol=dropbox2&host=1"
// define('ELFINDER_DROPBOX_APPKEY',    '');
// define('ELFINDER_DROPBOX_APPSECRET', '');
// ===============================================

// // Required for Google Drive network mount
// // Installation by composer
// // `composer require google/apiclient:^2.0`
// // Enable network mount
// elFinder::$netDrivers['googledrive'] = 'GoogleDrive';
// // GoogleDrive Netmount driver need next two settings. You can get at https://console.developers.google.com
// // AND reuire regist redirect url to "YOUR_CONNECTOR_URL?cmd=netmount&protocol=googledrive&host=1"
// define('ELFINDER_GOOGLEDRIVE_CLIENTID',     '');
// define('ELFINDER_GOOGLEDRIVE_CLIENTSECRET', '');
// // Required case of without composer
// define('ELFINDER_GOOGLEDRIVE_GOOGLEAPICLIENT', '/path/to/google-api-php-client/vendor/autoload.php');
// ===============================================

// // Required for Google Drive network mount with Flysystem
// // Installation by composer
// // `composer require nao-pon/flysystem-google-drive:~1.1 nao-pon/elfinder-flysystem-driver-ext`
// // Enable network mount
// elFinder::$netDrivers['googledrive'] = 'FlysystemGoogleDriveNetmount';
// // GoogleDrive Netmount driver need next two settings. You can get at https://console.developers.google.com
// // AND reuire regist redirect url to "YOUR_CONNECTOR_URL?cmd=netmount&protocol=googledrive&host=1"
// define('ELFINDER_GOOGLEDRIVE_CLIENTID',     '');
// define('ELFINDER_GOOGLEDRIVE_CLIENTSECRET', '');
// ===============================================

// // Required for One Drive network mount
// //  * cURL PHP extension required
// //  * HTTP server PATH_INFO supports required
// // Enable network mount
// elFinder::$netDrivers['onedrive'] = 'OneDrive';
// // GoogleDrive Netmount driver need next two settings. You can get at https://dev.onedrive.com
// // AND reuire regist redirect url to "YOUR_CONNECTOR_URL/netmount/onedrive/1"
// define('ELFINDER_ONEDRIVE_CLIENTID',     '');
// define('ELFINDER_ONEDRIVE_CLIENTSECRET', '');
// ===============================================

// // Required for Box network mount
// //  * cURL PHP extension required
// // Enable network mount
// elFinder::$netDrivers['box'] = 'Box';
// // Box Netmount driver need next two settings. You can get at https://developer.box.com
// // AND reuire regist redirect url to "YOUR_CONNECTOR_URL"
// define('ELFINDER_BOX_CLIENTID',     '');
// define('ELFINDER_BOX_CLIENTSECRET', '');
// ===============================================

// // Zoho Office Editor APIKey
// // https://www.zoho.com/docs/help/office-apis.html
// define('ELFINDER_ZOHO_OFFICE_APIKEY', '');
// ===============================================

// // Online converter (online-convert.com) APIKey
// // https://apiv2.online-convert.com/docs/getting_started/api_key.html
// define('ELFINDER_ONLINE_CONVERT_APIKEY', '');
// ===============================================

// // Zip Archive editor
// // Installation by composer
// // `composer require nao-pon/elfinder-flysystem-ziparchive-netmount`
// define('ELFINDER_DISABLE_ZIPEDITOR', false); // set `true` to disable zip editor
// ===============================================

/**
 * Simple function to demonstrate how to control file access using "accessControl" callback.
 * This method will disable accessing files/folders starting from '.' (dot)
 *
 * @param  string    $attr    attribute name (read|write|locked|hidden)
 * @param  string    $path    absolute file path
 * @param  string    $data    value of volume option `accessControlData`
 * @param  object    $volume  elFinder volume driver object
 * @param  bool|null $isDir   path is directory (true: directory, false: file, null: unknown)
 * @param  string    $relpath file path relative to volume root directory started with directory separator
 * @return bool|null
 **/
function access($attr, $path, $data, $volume, $isDir, $relpath) {
    $basename = basename($path);
    return $basename[0] === '.'                  // if file/folder begins with '.' (dot)
             && strlen($relpath) !== 1           // but with out volume root
        ? !($attr == 'read' || $attr == 'write') // set read+write to false, other (locked+hidden) set to true
        :  null;                                 // else elFinder decide it itself
}

// Documentation for connector options:
// https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
$opts = array(
    // 'debug' => true,
    'roots' => array(
        // Items volume
        array(
            'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
            'path'          => '/home/username/',                 // path to files (REQUIRED)
            'URL'           => dirname($_SERVER['PHP_SELF']) . '/../files/', // URL to files (REQUIRED)

            'uploadDeny'    => array('all'),                // All Mimetypes not allowed to upload
            'uploadAllow'   => array('all'), // Mimetype `image` and `text/plain` allowed to upload
            'uploadOrder'   => array('deny', 'allow'),      // allowed Mimetype `image` and `text/plain` only
'accessControl' => null,
'attributes'    => array(),
'acceptedName'  => '/^[^\/\0]+$/',                   // disable and hide dot starting files (OPTIONAL)
        ),
        // Trash volume
        array(
            'id'            => '1',
            'driver'        => 'Trash',
            'path'          => '../files/.trash/',
            'tmbURL'        => dirname($_SERVER['PHP_SELF']) . '/../files/.trash/.tmb/',
            'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
            'uploadDeny'    => array('all'),                // Recomend the same settings as the original volume that uses the trash
            'uploadAllow'   => array('all'), // Same as above
            'uploadOrder'   => array('deny', 'allow'),      // Same as above
            'accessControl' => 'access',                    // Same as above
        )
    )
);

// run elFinder
$connector = new elFinderConnector(new elFinder($opts));
$connector->run();

That is my connector.minimal.php configuration, which other configuration do you need

[nao-pon]

You do that in a client-side configuration.

[xata11]

please explain better, I don't understand what you mean by client-side, I am new in using elFinder

[nao-pon]

Usually it is in html calling elFinder.

[xata11]

<!DOCTYPE html>
<html>
<title>elFinder 2.1.x source version with PHP connector</title>
    <!-- Require JS (REQUIRED) -->
    <!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
    <script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>

    <script>
        define('elFinderConfig', {
            // elFinder options (REQUIRED)
            // Documentation for client options:
            // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
            defaultOpts : {
                url : 'php/connector.minimal.php' // connector URL (REQUIRED)
                ,

           // NA HERE I GO PUT AM BY ENTERMASTER     

themes : {
    'dark-slim'     : 'https://nao-pon.github.io/elfinder-theme-manifests/dark-slim.json',
    'material'      : 'https://nao-pon.github.io/elfinder-theme-manifests/material-default.json',
    'material-gray' : 'https://nao-pon.github.io/elfinder-theme-manifests/material-gray.json',
    'material-light': 'https://nao-pon.github.io/elfinder-theme-manifests/material-light.json',
    'bootstrap'     : 'https://nao-pon.github.io/elfinder-theme-manifests/bootstrap.json',
    'moono'         : 'https://nao-pon.github.io/elfinder-theme-manifests/moono.json',
    'win10'         : 'https://nao-pon.github.io/elfinder-theme-manifests/win10.json'
},

                commandsOptions : {
                    edit : {
                        extraOptions : {
                            // set API key to enable Creative Cloud image editor
                            // see https://console.adobe.io/
                            creativeCloudApiKey : '',
                            // browsing manager URL for CKEditor, TinyMCE
                            // uses self location with the empty value
                            managerUrl : ''
                        }
                    }
                    ,quicklook : {
                        // to enable preview with Google Docs Viewer
                        googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
                    }
                }

                // bootCalback calls at before elFinder boot up 
                ,bootCallback : function(fm, extraObj) {
                    // disable fullscreen cmd
                    delete fm.commands.fullscreen;
                    /* any bind functions etc. */
                    fm.bind('init', function() {
                        // any your code
                    });

                    // for example set document.title dynamically.
                    var title = document.title;
                    fm.bind('open', function() {
                        var path = '',
                            cwd  = fm.cwd();
                        if (cwd) {
                            path = fm.path(cwd.hash) || null;
                        }
                        document.title = path? path + ':' + title : title;
                    }).bind('destroy', function() {
                        document.title = title;
                    });
                }

                ,height : '100%' // you can use '100%' to fit window height
                ,resizable: false
            },
            managers : {
                // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
                'elfinder': {}
            }

        });

    </script>

</head>
<body style="margin:0; padding:0;">
    <div id="elfinder" style="width:100%; height:100%; border:none;"></div>
</body>

 <!--     <link rel="stylesheet" type="text/css" media="screen" href="themes/windows10/css/theme.css"> -->

</html>

HERE IS THE HTML OF THE ELFINDER

[nao-pon]

@xata11 for example...

/* any bind functions etc. */
fm.bind('init', function() {
    // any your code
}).bind('editEditorPrepare', function(e){
    var data = e.data;
    if (data.id === 'aceeditor') {
        data.instance.setOptions({
            theme: 'ace/theme/chrome'
        });
    }
});

[xata11]

Its still not working, I modify the html file and inserted the code above, but its still not working.

[nao-pon]

This is an online demo. - https://jsbin.com/himuhec/edit?js,output

[xata11]

for a better understanding sir, I have already post my elfinder.html, please kindly help me modify it and insert the code you posted above, because i have tried my best but its still not working. the online demo you posted, I am not able to edit any file, so I don't know if it is working over there or not

[nao-pon]

@xata11 The way to accomplish this is to set a callback function on the event 'editEditorPrepare'. The following code just sets the callback function of the 'editEditorPrepare' event to the default distributed in efinder.html. It works without problems.

ex. https://hypweb.net/elFinder-2.1.49/elfinder.html#elf_l1_Lw

Thus, the cause of the problem in your code is the part you changed to something else.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
        <title>elFinder 2.1.x source version with PHP connector</title>

        <!-- Require JS (REQUIRED) -->
        <!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
        <script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
        <script>
            define('elFinderConfig', {
                // elFinder options (REQUIRED)
                // Documentation for client options:
                // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
                defaultOpts : {
                    url : 'php/connector.minimal.php' // connector URL (REQUIRED)
                    ,commandsOptions : {
                        edit : {
                            extraOptions : {
                                // set API key to enable Creative Cloud image editor
                                // see https://console.adobe.io/
                                creativeCloudApiKey : '',
                                // browsing manager URL for CKEditor, TinyMCE
                                // uses self location with the empty value
                                managerUrl : ''
                            }
                        }
                        ,quicklook : {
                            // to enable CAD-Files and 3D-Models preview with sharecad.org
                            sharecadMimes : ['image/vnd.dwg', 'image/vnd.dxf', 'model/vnd.dwf', 'application/vnd.hp-hpgl', 'application/plt', 'application/step', 'model/iges', 'application/vnd.ms-pki.stl', 'application/sat', 'image/cgm', 'application/x-msmetafile'],
                            // to enable preview with Google Docs Viewer
                            googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/postscript', 'application/rtf'],
                            // to enable preview with Microsoft Office Online Viewer
                            // these MIME types override "googleDocsMimes"
                            officeOnlineMimes : ['application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation']
                        }
                    }
                    // bootCalback calls at before elFinder boot up 
                    ,bootCallback : function(fm, extraObj) {
                        /* any bind functions etc. */
                        fm.bind('init', function() {
                            // any your code
                        }).bind('editEditorPrepare', function(e){
                            var data = e.data;
                            if (data.id === 'aceeditor') {
                                data.instance.setOptions({
                                    theme: 'ace/theme/chrome'
                                });
                            }
                        });
                        // for example set document.title dynamically.
                        var title = document.title;
                        fm.bind('open', function() {
                            var path = '',
                                cwd  = fm.cwd();
                            if (cwd) {
                                path = fm.path(cwd.hash) || null;
                            }
                            document.title = path? path + ':' + title : title;
                        }).bind('destroy', function() {
                            document.title = title;
                        });
                    }
                },
                managers : {
                    // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
                    'elfinder': {}
                }
            });
        </script>
    </head>
    <body>

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder"></div>

    </body>
</html>

[xata11]

thank you for your code, but I can no longer change my themes, please where is the right place to place my theme code on the elfinder.html file

[nao-pon]

@xata11 I already showed it at https://github.com/Studio-42/elFinder/issues/2965#issuecomment-515807462. Probably, your other code that is loading is affects it.

This is not a place for user support, so we can not support it further.

[xata11]

Thank You so far