Elfinder integration in Elrte - window doesn't open

Added by ----- -----. 11 months ago

The button is clickable but nothing happens, I don't know why.

My HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><?php print_r($_POST); ?>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>elRTE</title>

    <!-- jQuery and jQuery UI -->
    <script src="js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">

    <!-- elRTE -->
    <script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8">

    <!-- elRTE translation messages -->
    <script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
        $().ready(function() {
            var opts = {
                cssClass : 'el-rte',
                // lang     : 'ru',
                height   : 450,
                toolbar  : 'maxi',
                cssfiles : ['css/elrte-inner.css'],
                fmOpen : function(callback) {
        $('<div id="editor" />').elfinder({
           url : 'elfinder/connectors/php/connector.php',
           lang : 'de',
           dialog : { width : 900, modal : true, title : 'Editor' }, // open in dialog window
           closeOnEditorCallback : true, // close after file select
           editorCallback : callback     // pass callback to file manager
       })
    }
            }
            $('#editor').elrte(opts);
        })
    </script>

    <style type="text/css" media="screen">
        body { padding:20px;}
    </style>

</head>
<body>
    <form action="" method="post" >
    <div id="editor">
    </div>
            </form>
</body>
</html>


Replies (5)

RE: Elfinder integration in Elrte - window doesn't open - Added by Troex Nevelin 11 months ago

You forget to include elFinder:

<script src="elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="elfinder/css/elfinder.css" type="text/css" media="screen" charset="utf-8" />

Set the correct path for your server.

RE: Elfinder integration in Elrte - window doesn't open - Added by ----- -----. 11 months ago

Yes!

Maybe you should add this to your wiki, I can't see the information here:
http://elrte.org/redmine/projects/elfinder/wiki/Integration_EN#elRTE

Can you help me with TinyMCE and elfinder, probably an easy to find mistake:
elfinder.html

<!-- jQuery and jQuery UI -->
    <script src="elfinder/js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="elfinder/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="elfinder/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8">
    <script src="elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="elfinder/css/elfinder.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript">$('#content').elfinder({
     url : 'elfinder/connectors/php/connector.php',
     lang : 'ru',
     editorCallback : function(url) {
       window.tinymceFileWin.document.forms[0].elements[window.tinymceFileField].value = url;
        window.tinymceFileWin.focus();
        window.close();
     }
  })
</script>

The button is displayed, but an empty window is opened.
HTML file with form and tinyMCE

<form method="post" action="">
        <p>     

                <noscript>
                    <input type="submit" value="senden" />
                </noscript>
 <textarea name="content" id="content">
                <?php $incpage = $_GET['page'] . ".inc";
                if ( file_exists( $incpage ) !== false )  
                    include($incpage); 
                else
                    //echo "Fehler: Datei existiert nicht - $incpage";
                ?>
                </textarea>
                <input type="hidden" name="page" value="<?php echo $incpage; ?>" />

        </p>

</form>

tinyMCE config

// content CSS (should be your site CSS)
    content_css : "design.css",
    file_browser_callback : function(field_name, url, type, win) {
        var w = window.open('http://localhost/eis/elfinder.html', null, 'width=600,height=500');
        // Save required parameters in global variables of window (not the best solution, can offer better?)
        // else you can pass parameters using GET and than parse them in elfinder.html
        w.tinymceFileField = field_name;
       w.tinymceFileWin = win;
    }

RE: Elfinder integration in Elrte - window doesn't open - Added by Troex Nevelin 11 months ago

This howto is not copy-paste it gives the idea how it can work.
Use FireBug to see if you have any errors on the page.
Make sure elfinder.html is valid html you use right container (div/node) for elFinder, in the example about you must have <div id="#content"> in your elfinder.html body. And better wrap elFinder initialization in $().ready(function() { ... });

RE: Elfinder integration in Elrte - window doesn't open - Added by Dmitry Levashov 11 months ago

elFinder initialization REQUIRED to be in $().ready(function() { ... });

RE: Elfinder integration in Elrte - window doesn't open - Added by ----- -----. 11 months ago

Thanks!

These were the problems, brilliant forum!

(1-5/5)