elRTE

Проще всего такую задачу решить написав маленький файловый менеджер который эмулирует загрузку и возвращает нам URL картинки. В любом случае вам потребуется серверная часть (upload скрипт), которой у elRTE нет.

Основная сложность заключается что в том что нужно загрузить файл не перезагружая страницы, а для этого приходиться плясать с бубнов вокруг iframe. Чуть позже я выложу здесь пример кода.

Буду ждать

Итак заменяем файловый менеджер на простую upload форму без перезагрузки страницы:

 1 $('#myupload').dialog({
 2   autoOpen: false
 3 });
 4 
 5 var opts = {
 6   lang     : 'ru',
 7   height   : 350,
 8   cssfiles : ['elrte/css/elrte-inner.css'],
 9   fmOpen : function(callback) {
10     $('#myupload').dialog('open');
11     var $iframe = $('<iframe name="upload_target"></iframe>');
12     var iframe = $iframe[0];
13     $iframe.hide();
14     $iframe.appendTo($('#file_upload_form'));
15     $('#file').change(function() {
16       $('#file_upload_form').submit();
17     });
18     $('#file_upload_form').attr('target', $iframe.attr('name'));
19     $('#file_upload_form').submit(function() {
20       $iframe.bind('load', function() {
21         $iframe.unbind('load');
22         var doc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument ? iframe.contentDocument : iframe.document;
23         html = $(doc.body).html();
24         var data = window.JSON && window.JSON.parse ? window.JSON.parse(html) : (new Function("return " + html))();
25         if (data.success) {
26           callback(data.file_name);
27           $('#myupload').dialog('close');
28         }
29         else if (data.failure) {
30           alert("Upload Failed: " + data.failure);
31         }
32       });
33     });
34     $('#file').click();
35   }
36 }
37 var rte = jQuery('#editor').elrte(opts);

Далее вставляем в html форму для загрузки (можно вообщем её сгенерировать и на лету из js):

1 <div id="myupload" title="Upload file">
2     <form id="file_upload_form" enctype="multipart/form-data" action="upload.php" method="POST">
3         <input id="file" name="file" type="file" /><br />
4         <input type="submit" value="Upload" />
5     </form>
6 </div>

Краткий пример того, что upload.php возвращает javascript клиенку:

 1 list($name, $result) = upload('file', 'image_uploads', 'jpg,jpeg,gif,png');
 2 if ($name) { // Upload Successful
 3     $path = "image_uploads/".$name;
 4     echo json_encode(array(
 5         "success"       =>    true,
 6         "file_name"     =>    $path    // Path of the file - JS should get this value
 7     ));
 8 } else { // Upload failed for some reason.
 9     echo json_encode(array(
10         "success"       =>    false,
11         "failure"       =>    $result
12     ));
13 }

P.S.: тестировалось в FireFox и Chrome

Не будет работать в опере. Опера она такая опера - она не может получить доступ к содержимому ифрейма сразу после его загрузки

Dmitry Levashov wrote:

Не будет работать в опере. Опера она такая опера - она не может получить доступ к содержимому ифрейма сразу после его загрузки

Это да, кажется относиться только к нескольким версиям, просто из-за оперы этот код возрастёт раза в полтора, а пример хочеться оставить более ясным.

В FireFox почему-то не срабатывает 34 строка $('#file_upload_form input#file').click(); может кто скажет почему?

в коде так и написано #file_upload_form input#file без пробела?
нет необходимости при поиске по id указывать путь от родителя #file - достаточно

Dmitry Levashov wrote:

в коде так и написано #file_upload_form input#file без пробела? нет необходимости при поиске по id указывать путь от родителя #file - достаточно

поправил, но .click() так и не заработал

у меня тоже не заработала загрузка файла :(

Я кстати на рассказал как это будет выглядеть, будет это работать вот так:

Сама кнопка файлового менеджера на панеле не будет иметь смысла в данном случае, её можно убрать от туда.

Загрузка работает, в FF автоматом просто не открывается дилог выбора файла для загрузки.

А что именно не заработало поднобнее, какой browser?

Добрый вечер.

Что-то у меня не получается. Помогите разобраться.
Диалог открывается, файл загружается(в папке я его вижу). Но потом диалоговое окно автоматически не закрывается и путь не передается в поле "URL". Что не так?

вывод firebug в студию

Поставил фаербаг и о чудо - все заработало. Как выключаю фаербаг - опять не работает. Что за мистика?

Диагноз: наличие вызова window.console.log
Причины: вероятно, разгильдяйство разработчиков
Лечение: хирургическое - найти и удалить :)

действительно, закоментируйте строку window.console.log(data);

пример писáлся на коленке =)

Здравствуйте !
нажимаю upload если нет файла то сообщение No file specified появляется иначе нечего не происходит.
фаирбаг ругается на эту строку

var data = window.JSON && window.JSON.parse ? window.JSON.parse(html) : (new Function("return " + html))();

window.console.log(data);

а так я подключаю

        <link rel="stylesheet" href="http://elrte.org/style/style.css"    type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="http://elrte.org/release/elrte/css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8" /> 
        <link rel="stylesheet" href="http://elrte.org/release/elrte/css/elrte.min.css"  type="text/css" media="screen" charset="utf-8" />

        <link rel="stylesheet" href="http://elrte.org/release/elfinder/css/elfinder.css" type="text/css" media="screen" charset="utf-8" />
        <script src="http://elrte.org/release/elrte/js/jquery-1.4.4.min.js"          type="text/javascript" charset="utf-8"></script>
        <script src="http://elrte.org/style/jquery.backgroundPosition.js" type="text/javascript" charset="utf-8"></script>

        <script src="http://elrte.org/release/elrte/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://elrte.org/release/elrte/js/elrte.min.js"                  type="text/javascript" charset="utf-8"></script>
        <script src="http://elrte.org/release/elrte/js/i18n/elrte.en.js"          type="text/javascript" charset="utf-8"></script>

        <script src="http://elrte.org/release/elfinder/js/elfinder.min.js"            type="text/javascript" charset="utf-8"></script>
        <script src="http://elrte.org/release/elfinder/js/i18n/elfinder.en.js"    type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
        jQuery().ready(function() {

            $('#myupload').dialog({
                autoOpen: false
            });

            var opts = {
                cssClass : 'el-rte',
                absoluteURLs: false,
                lang     : 'ru',
                height   : 350,
                cssfiles : ['css/elrte-inner.css'],
                fmOpen : function(callback) {
                    $('#myupload').dialog('open');
                    var $iframe = $('<iframe name="upload_target"></iframe>');
                    var iframe = $iframe[0];
                    $iframe.hide();
                    $iframe.appendTo($('#file_upload_form'));
                    $('#file_upload_form input#file').change(function() {
                        $('#file_upload_form').submit();
                    });
                    $('#file_upload_form').attr('target', $iframe.attr('name'));
                    $('#file_upload_form').submit(function() {
                        $iframe.bind('load', function() {
                            $iframe.unbind('load');
                            var doc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument ? iframe.contentDocument : iframe.document;
                            html = $(doc.body).html();
                            var data = window.JSON && window.JSON.parse ? window.JSON.parse(html) : (new Function("return " + html))();
                            //window.console.log(data);
                            if (data.success) {
                                callback(data.file_name);
                                $('#myupload').dialog('close');
                            }
                            else if (data.failure) {
                                alert("Upload Failed: " + data.failure);
                            }
                        });
                    });
                    $('#file_upload_form input#file').click();
                }
            }
            var rte = jQuery('#editor').elrte(opts);
        })

        </script>

1. Не нужно подключать elrte и elfinder с нашего сервера! мы не CDN чтобы раздавать контент и тем более в скором будущем этих файлов может не быть там =)

2. По вашей проблеме, отследите ошибку в FireBug. Данный код был написан, как пример, а не как готовое рабочее решение и тестировался только в Firefox и Chrome

По первому пункту, извините, подключал только ради проверки с localhost...
2) Жаль что код не готовое рабочие решение ... задумка очень класная в замен elfinder'a для пых.ера
браузером пользуюсь Firefox 3.6.13

Спасибо !!!
Всё работает просто нужно было прочитать фаирбаг,
не работало из-за того что дерикторию не создал....
пойду руки выпряМлять
ещё раз спасибо за данный код!)

Поробовал сделать на основе этого примера форму для загрузки изображений или вставки уже имеющихся (отображаются под формой загрузки в том же диалоговом окошке). Все работает прекрасно, в диалоговое окно вставки картинок урлы пересылаются прекрасно. Но потом обратил внимание что в самом редакторе появилась новая кнопка - с папочкой. По ней вызывается моё окошко загрузки (то есть по сути генерируется событие fmOpen), однако чтобы я не делал, в сам редактор ничего не вставляется. Как я понимаю, при выборе файла, теоретически, ссылка на него должна вставляться в редактор, но этого не происходит. Сделал в своём диалоговом окне alert(callback). Колбеки присылаются разные. Но тот что генерится из окошка редактирование картинок работает, тот что из самого редактора - впустую. Что не так? Хотелось бы, раз уж есть фича, так чтоб работала, тем более что вставка ссылок на файл (для всяких архивов например) пригодилась бы.

Получается на fmOpen вы повесили своё событие?

Если появилась кнопочка с файловым менеджерм и ты по ней кликните запуститься fmOpen но callback не отработает, так как он не знает куда и как передать url, вообще эта кнопка была сделана именно для нашей cms системы, чтобы просто независимо от редактора запускать файловый менеджер - и всё.

Чтобы не смущать вас и возможно ваших пользователей можно просто убрать кнопку с toolbar панели, ибо в вашем варианте от неё почти нет смысла.

Callback вызывает только из диалога вставки картинки и media

Что значит не знает? А колбек зачем?

И тем не менее? Что тогда делает elfinder? Пересылает урл в другом виде? делает какие то другие дополнительные манипуляции? Ведь Callback функция присылается, не пустая, но ничего не происходит при её вызове. Для вставки ссылок на прикрепленные к странице файлы я сделал снизу под редактором их список, чтобы пользователь переносил их драгиндропом. Что из этого вышло читайте в соседней теме - короче драгиндроп ни к чему не привел. Потому единственный выход - вставлять линк на файл через диалоговое окно, как это было в моем старом редакторе WysiwygPro. Там было диалоговое окно для картинок, и диалоговое окно для аттачей, с иконкой pdf файла. В данном случае я это представлял именно так - щелк на иконке с "папкой", выбрал файл, ссылка на него вставилась в редакторе. Я даже был удивлен что это не заработало. Было бы очень хорошо если бы это всетаки можно было реализовать - избавило бы от кучи проблем.

• выбрали картинку (jpg|png|gif) - создаём <img>
• если это swf - <object>
• в остальных случаях создаеём - <a href="URL">somefile.pdf</a> - то есть в качестве ссылки используем имя файла, но тут может быть трудоность если пользователь захочет ввести "Загрузить" - ему для этого придётся удалить весь текст и с ним же удалиться сама ссылка. Или же вызывать ещё один dialog и спрашивать текст для ссылки?

Не, просто третий вариант, ведь вставка картинок и флеша диалоги уже у вас есть. Просто ссылка на файл. А ссылку можно отредактировать уже опосля соответсвующим диалогом, если ему нужны глупые слова "тут", "загрузить" и прочее. Или, если позволит движок/время, сделать колбек функцию с опциональными параметрами:

callback(url,text='',title=''); // Урл, текст в теге A, аттрибут title в теге A. Текст по дефолту потом принимается = урлу, титл по дефолту просто пуст.

(Вообще, как сам веб-девелопер, я не люблю подобное, и избегаю этого, ведь поисковики эти слова в ссылках тоже анализируют. Только название файла или, в крайнем случае, его полное точное описание. Для обычных прикрепленных файлов обычно не нужно.)

В принципе, тогда есть уже и без того три варианта вставки -

1 кнопка с папкой - вставка ссылки на файл, без разницы какого типа. Ссылки на картинки тоже бывают, особенно больших размеров (сканы, карты, прочее).
2 кнопка вставки картинки.
3 кнопка вставки swf.

Так что всё у вас уже есть. И как это должно выглядеть, пользователь выбирает, просто выбирая соответсвующее диалоговое окно, нажимая на кнопки в редакторе. Главное, что бы девелопер мог реализовать fmOpen диалог, основываясь на своих потребностях, и прицепить его к редактору, зная что организует легко и быстро всю манипуляцию с файлами.

У меня например, инфа о файлах хранится в базе, за каждой страницей хранится список прикрепленных только к ней файлов, а сами файлы хранятся хешами с ссылками вида "/files/fa/34/fa345cd6a8943a09". Тут самое оно, это написать просто своё окно открытия файла. Ведь больше нчиего и не требуется. Переделывать elFinder, чтобы заставить его уметь видеть файлы "из базы" - это стрелять из пушки по воробьям. Прочто хочу чтоб ссылка из моего окошка вставлялась.

ХМ. Глянул только что у вас в демо - все аналогично. Нажав кнопку с папкой, вызвал ElFinder, выбрал файл/картинку. Если выбрана одна или по двойному клику вызывается первый пункт в контекстном меню - "Select". Файндер закрывается,.... в редакторе пусто. Видать ваш файндер тоже вызывает колбек функцию, а редактору побоку? Я это понимаю так - юзер выбрал файл, файндер закрылся, в текст вставилась ссылка. Надо картинка - открыл файндер через диалог вставки картинок, отредактировал Title, нажал ОК. Типа так. Точнее, второе рабоатет, первое, просто вставка ссылки, нет.