Курилка.co.ua Войти »
Orphus RSS kurilka.co.ua

Category

Archives

« Next Item:   Previous Item: »

Курилка.co.ua › Вебмастеру › JavaScript › Upload Images для TinyMCE

Upload Images для TinyMCE

Author wmas wmas | Category Category JavaScript, PHP

Не думал, что тема с библиотекой TinyMCE получит несколько более подробное описание, но возможно оно того и стоит. Ведь всё познается в сравнении? И вот первые шаги в изучении настроек TinyMCE пересеклись с интересными подробностями загрузки изображений (Upload Images). По умолчанию, используя кнопку image или более продвинутый плагин: advimage, вам предлагается возможность прописать только URL картинки. Вот как может выглядеть подключение того же advimage, с учетом рассматриваемого примера в ранее упомянутой мной теме:

<script language="javascript" type="text/javascript">
tinyMCE.init({
  mode : "exact",
  elements : "elm_content",
  plugins : "advimage"
});
</script>

Однако для TinyMCE можно написать и свои плагины. Среди таковых оказался и ibrowser от Jaeger Consulting. Мне попалась несколько устарелая версия, не обновляемая с 2006 года. Отсутствовал даже намёк на совместимость с третьей версией TinyMCE. Теперь вроде что-то сдвинулось, но разбираться в новинках и основательно переписывать заметку — лень. Так что учтите этот нюанс. Среди плюсов упомянутого плагина можно отметить то, что он является бесплатным и совместимым с SPAW, FCKeditor, Xinha, и HTMLarea. Ну а теперь о том как его установить:

  • Изначально вам понадобиться скачать сам плагин ibrowser.
  • Затем, рспакуйте содержимое архива в папку plugins/ библиотеки TinyMCE. В моём случае, это: tinymce/jscripts/tiny_mce/plugins/.
  • В появившейся папке ibrowser/ найдите файл config/config.inc.php. Откройте его для редактирования и найдите в нём следующие строки:

    $cfg['ilibs'] = array (
      array (
        'value' => '/dev/im/assets/images/',
        'text' => 'Site Pictures',
      ),
      array (
        'value' => '/dev/im/assets/gallery/',
        'text' => 'Gallery',
      ),
    );

    Здесь мы указываем директории (или директорию), куда могут быть загружены картинки. Думаю, что здесь все понятно. Значением $cfg['ilibs'] является массивом из под-массивов. Последние имеют строго определенную структуру:

    • value — путь к директории;
    • text — ваше название директории (используется в интерфейсе для визуализации).

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

  • Для директории ibrowser/scripts/phpThumb/cache/ (которая, напомню, находится в папке плагинов библиотеки TinyMCE) меняем chmod на 777.
  • Далее в директории ibrowser/interface/ находим файл соответствующей библиотеки, я лично использовал: tinyMCE.editor_plugin.js и переносим его в директорию ibrowser, где переименовываем его на editor_plugin.js.
  • Ну а теперь добавляем плагин в код инициализации TinyMCE. В моём случае это выглядит так:

    <script language="javascript" type="text/javascript">
    tinyMCE.init({
      mode : "exact",
      elements : "elm_content",
      plugins : "ibrowser",
      theme_advanced_buttons2_add : "ibrowser",
    });
    </script>
    Обратите внимание на параметр: theme_advanced_buttonsX_add, — в моём примере вместо X стоит 2, что определяет строку панели инструментов, на которую будет добавлена иконка вызова формы загрузки и размещения картинки.

Вот собственно и всё. Отмечу, что для работы данного плагина необходим скрипт-обработчик (к примеру PHP), который явно должен поддерживать работу с картинками. Наш же интерфейс теперь имеет следующий вид:

интерфейс TinyMCE с иконкой плагина ibrowser

Для наглядности, иконку плагина, я обвёл красным кружочком. Если кликнуть по этой иконке откроется следующее окно:

Окно самого плагина ibrowser, где можно загрузить и/или выбрать картинку для вставки

Если вы хотите, чтобы приветствие не выводилось по умолчанию, необходимо будет слегка отредактировать файл: ibrowser/ibrowser.php. Найдите в нём следующую строку:

<div id="imDiv" class="showit">

Для понимания того, что мы делаем, обратите внимание на значение атрибута class. По умолчанию стоит showit. Достаточно заменить его на hideit и по умолчанию вообще ничего не будет выводиться, кроме кнопочек слева. Так что следует задуматься над вопросом: «какое диалоговое окно вам необходимо?» — и произвести с ним обратные действия. Например, я сделал так, чтобы по умолчанию выводилось диалоговое окно «INSERT/CHANGE», для чего в строке:

<div id="inDiv" class="hideit">

Соответственно, заменил hideit на showit. С самим же интерфейсом думаю проблем не возникнет. Хотя, на всякий случай, картинка с некоторыми уточнениями. Остальное думаю разберёте и самостоятельно.

Исправленный вариант интерфейса ibrowser с отображением диалога INSERT/CHANGE по умолчанию

На это всё. Спасибо за внимание.

Сочинения русская литература сочинение. Задания по темам русской литературы , печать календарей киев , Совместимость знаков Близнецы Стрелец , приключения электроника смотреть , параграф 78 фильм второй фильм смотреть

Tags Tags , , ,
Publish: Воскресенье Дек 30, 2007 TrackBack

Leave a reply

:mrgreen: :-D :-) ;-) 8-) :-P :-| :-? :-x :-( :cry: :lol: :roll: :oops: :-o 8-O :evil: :twisted: :!: :?: :idea: :arrow:

28 Responses for "Upload Images для TinyMCE"

feed for comments on this post

  • TinyMCE Обратная ссылка #779 author: TinyMCE Reply
    publish: Вторник Янв 1, 2008 at 6:54 пп

    Установка ibrowser 1.3…

    На kurilka.co.ua хорошо описана установка плагина ibrowser, для загрузки и просмотра картинок. Так как он не обновляется с 2006 года, отсутствуют даже …

  • EwGenij Комментарий #780 author: EwGenij Reply
    publish: Среда Янв 2, 2008 at 8:17 дп

    И не поспорить :) Хорошую тему развернул товарищ. Еще можно написать вообще о файловом менеджере для тини, так как иногда требуется не только картинку вставить. Хотя, не знаю точно, так как сам не проверял, может и здесь не только картинку вставляют.

    http://sourceforge.net/tracker/?atid=738747&#38;group_id=103281&#38;func=browse
    Здесь я видел пару штук.

  • wmas Комментарий #781 author: wmas Reply
    publish: Среда Янв 2, 2008 at 12:28 пп

    2EwGenij: Как я и говорил вариантов тут достаточно ;) Я например вообще взял идею у движка для блогов inTerra и сделал аплоадер который работает параллельно с advimage и без всяких там аякс или всплывающего окна :) Правда пока сделал только для картинок и вообще все очень простенько. Кода всего один файлик и тот не сильно большой :mrgreen: Есть пространство для творчества 8)

  • Ян Комментарий #868 author: Ян Reply (subscribed to comments)
    publish: Вторник Янв 15, 2008 at 6:19 пп

    Простите мне мою безграмотность, но я так и не понял, в каком файле находится код инициализации TinyMCE для вставки?

  • wmas Комментарий #870 author: wmas Reply
    publish: Вторник Янв 15, 2008 at 8:07 пп

    2Ян: Ну, инициировать сам TinyMCE надо на той странице, где Вы его планируете использовать. Возможно Вам будет полезно почитать замеку: Подключение TinyMCE или заметки для начинающих, но смотрите сами ;-)

  • Spree Комментарий #1144 author: Spree Reply
    publish: Четверг Янв 31, 2008 at 3:59 дп

    Народ, а кто-нибудь всё-таки пробовал ставить этот плагин для третьей версии tiny ??

  • wmas Комментарий #1152 author: wmas Reply
    publish: Четверг Янв 31, 2008 at 1:39 пп

    2Spree: Ставить не пробовал, но говорят, что вроде на третьей не катит. Вообще там несложно написать и что-то свое используя тот же advimage. Я лично за дня три справился. Правда пока нигде его так и не впихнул :mrgreen: лень…

  • 0z0n Комментарий #1264 author: 0z0n Reply (subscribed to comments)
    publish: Четверг Фев 14, 2008 at 7:31 дп

    Привет, wmas, не мог бы ты поделиться плагином? :roll: просто ссылка http://j-cons.com/downloads/ibrowser.zip мервая, увы, а плагин позарез нужен.
    Если не сложно скинь, пожалуйста на Antonio_2003[собачко]ukr.net
    Заранее благодарен :)

  • 0z0n Комментарий #1265 author: 0z0n Reply (subscribed to comments)
    publish: Четверг Фев 14, 2008 at 7:45 дп

    Долго гуглил, и таки нашел! Может кому пригодится, т.к. девелопмент плагина свернут со всеми соотв. последствиями :(
    http://wsdh.net/ibrowser.zip

  • wmas Комментарий #1266 author: wmas Reply
    publish: Четверг Фев 14, 2008 at 11:31 дп

    20z0n: Спасибо за ссылку.
    Вообще мой источник тоже работает, просто архив толи переименовали, толи новая версия: ibrowser V 1.3.8.zip, а еще там есть imanager V 1.2.8.zip и imanager masks.zip

  • switch Комментарий #1504 author: switch Reply (subscribed to comments)
    publish: Пятница Мар 21, 2008 at 12:23 дп

    Сделал все по инструкции.
    Когда нажимаю на кнопочку «upload», то появляется строка для выбора файла с диска. Выбираю и ВСЕ, дальше нет кнопочки submit. У кого-то вообще получилост из этого диалога выгрузить файлик на сайт???

  • wmas Комментарий #1505 author: wmas Reply
    publish: Пятница Мар 21, 2008 at 11:10 дп

    2switch: возможно проблема в том, что ibrowser вроде как не совместим с третьей версией TinyMCE да и поддержка PHP должна быть, для обработки запроса.

  • 0z0n Комментарий #1508 author: 0z0n Reply (subscribed to comments)
    publish: Воскресенье Мар 23, 2008 at 6:18 пп

    Проверьте пути: откройте файл config/config.inc.php примерно на 111 строке в версии 1.3.8 есть такое:
    //$cfg['ilibs_inc'] = realpath(dirname(__FILE__) . '/../scripts/rdirs.php');

    Строчку нужно расскоментировать! Т.е. сделать так:
    $cfg['ilibs_inc'] = realpath(dirname(__FILE__) . '/../scripts/rdirs.php');

    У меня на Денвере заработало :) Так же проверялось на шаровом хостинге джино-нет.

  • MAESTRO Комментарий #1728 author: MAESTRO Reply (subscribed to comments)
    publish: Четверг Июл 3, 2008 at 1:46 дп

    Качал сегодня браузер вроде с официального сайта. В папке interface есть файлик tinyMCE3.0_editor_plugin.js. Абсолютно официально. А говорите не поддерживается давно. проверял. с 3 версией работает. Тока: В опере при попытке вызвать браузер нихера не происходит и с путями не могу разобраться. Абсолютные прописывал — не канает. Остальное с виду всё работает

  • ЯR Комментарий #2086 author: ЯR Reply (subscribed to comments)
    publish: Среда Дек 24, 2008 at 12:11 дп

    спасибо за инструкцию :) добавлю, что сейчас айБраузер прекрасно совместим с третьей версией tinyMCE (версия браузера 1.3.9) и, если доступ к редактору должен быть только из админки, нужно не забыть защитить файл tiny_mce/plugins/ibrowser/ibrowser.php

  • 4e Комментарий #2285 author: 4e Reply
    publish: Понедельник Май 4, 2009 at 7:36 пп

    А где достать iBrowser? по ссылке уже ничего не дает

  • wmas Комментарий #2286 author: wmas Reply
    publish: Понедельник Май 4, 2009 at 10:21 пп

    24e: hi! Да, пришлось поискать. Последнюю версию можно найти тут.

  • Василий Комментарий #2322 author: Василий Reply
    publish: Суббота Июн 20, 2009 at 2:06 дп

    огромное спс за даную статью , очень круто и толково расписано !

  • Shrek Комментарий #2333 author: Shrek Reply
    publish: Вторник Июн 30, 2009 at 12:49 пп

    2switch: Попробуй в файле ibrowser.php под строкой
    поменять размер input для аплоада :) и будет тебе счастье

  • Serg Комментарий #2334 author: Serg Reply (subscribed to comments)
    publish: Среда Июл 1, 2009 at 3:59 пп

    2ЯR:

    нужно не забыть защитить файл tiny_mce/plugins/ibrowser/ibrowser.php

    А как это можно сделать?

  • nikolayreal Комментарий #2413 author: nikolayreal Reply (subscribed to comments)
    publish: Суббота Сен 12, 2009 at 4:50 пп

    Установил. Сделал все как нужно скопировал файл интерфейса 3.0 (у меня 3.6) в корневую директорию плагина. Кнопка в редакторе появилась. При нажатии ничего не происходит а в консоле ошибок браузера пишет: ib is undefined on line 23 editor_plugin.js
    Посмотрел там такие строчки:

    ib.isMSIE = tinymce.isIE;
    ib.isGecko = tinymce.isGecko;
    ib.oEditor = ed;
    ib.editor = ed;
    ib.selectedElement = e;
    ib.baseURL = url + '/ibrowser.php';

    Лично я ниче не понял :(

  • wmas Комментарий #2419 author: wmas Reply
    publish: Суббота Сен 19, 2009 at 12:17 дп

    2nikolayreal: hi! На момент написания заметки проект ibrowser, если не ошибаюсь, вообще был застопорен. Я даже не знал, что появилась новая версия. Возможно, там что-то кардинально изменилось. Хотя, быть может, нужно учесть тот факт, что для работы ibrowser нужна поддержка PHP?

    P.S. будет время, погляжу что да как и подновлю заметку.

  • Антон Комментарий #2450 author: Антон Reply
    publish: Воскресенье Окт 11, 2009 at 11:14 дп

    Попробовал поставить ваш вариант, но он мне не очень понравился. Во первых простому пользователю лучше не давать в руки редактор, с возможностью просмотра всех загруженных изображений. Он может им воспользоваться не по назначению, да и как правило обычный юзер долго плутает в таких редакторах.

    Нарыл вот тут: pegas-studio.net/uslugi/tinymce.php

    Другой скрипт загрузки изображений для TinyMCE, правда он платный, но намного проще и удобнее, как для пользователя, так и для админа, в установке, настройке и полностью русский. К тому же его можно ставить для всех пользователей, не опасаясь что кто либо грохнет кучу загруженных изображений, а в iBrowser могут грохнуть легко.

  • wmas Комментарий #2451 author: wmas Reply
    publish: Воскресенье Окт 11, 2009 at 1:05 пп

    2Антон: hi! Спасибо за ссылочку, действительно удобный плагин ;-)

  • fanat Комментарий #2484 author: fanat Reply
    publish: Воскресенье Ноя 15, 2009 at 2:05 дп

    Дружище, большое спасибо!!!
    Сэкономил кучу времени. Редактор дальше доковыряю сам.

  • Vipoff Комментарий #2525 author: Vipoff Reply
    publish: Вторник Дек 15, 2009 at 5:26 пп

    спасибо автору и авторам плагина — съэкономили время. На первое время пойдет, но интрейфес прибахнутый… надо будет поменять…

  • wmas Комментарий #2526 author: wmas Reply
    publish: Вторник Дек 15, 2009 at 9:32 пп

    2fanat, Vipoff: hi! по сути сейчас есть и более привлекательные решения, просто заметка осталась 8-)

  • Gogita Комментарий #2832 author: Gogita Reply
    publish: Понедельник Авг 1, 2011 at 7:46 пп

    Кнопка не появляется, хотя все делаю по инструкции.

Popular links
Copyright © since 2006 Курилка.co.ua,
powered by WordPress