Блог старого компьютера

Блог старого компьютера


Главная Joomla Кнопка выбора изображения в свой компонент Joomla

Кнопка выбора изображения в свой компонент Joomla

15.12.2012 09:42 Администратор Joomla
Печать PDF

Не знал как правильно называться эту статью, поэтому постараюсь именно тут подробно описать что я имел ввиду. При создании материала в joomla часто нужно вставить изображение в текст, для этого в joomla  чуть ниже редактора есть кнопка "Изображение", при нажатии на которую появляется небольшое окно в котором мы можем либо выбрать из существующих изображений либо, загрузить изображение с вашего ПК. За эту функцию загрузки изображений в joomla отвечает com_media.

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

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

<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {

SqueezeBox.initialize({});

$$('a.modal-button').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
function jInsertEditorText( text, editor ) {
insertAtCursor( document.getElementById(editor), text );
}
window.addEvent('domready', function() {

SqueezeBox.initialize({});

$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
function insertAtCursor(myField, myValue) {
if (document.selection) {
// IE support
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
} else if (myField.selectionStart || myField.selectionStart == '0') {
// MOZILLA/NETSCAPE support
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
</script>

<input name="logotype" id="text" style="width: 300px;" value="">
<div id="editor-xtd-buttons">
<div class="button2-left"><div class="image"><a class="modal-button" title="Изображение" href="/component/media/?view=images&tmpl=component&e_name=text" rel="{handler: 'iframe', size: {x: 570, y: 400}}">Изображение</a></div></div>
</div>

 Покажу как все это выглядит у меня (пока еще не оформил).

После нажатия на кнопку "Изображение" появляется окно его выбора, а после выбора в форму логотип вставляется то что мы выбрали.

После чего при нажатии на кнопку "Сохранить" я обрабатываю данные посланные полем логотип и оставляю в нем только адрес до изображения.

Не могу сказать что это довольно таки правильный вариант использования в своем компоненте стандартного метода загрузки изображений в joomla, но это работает. Если вы знаете более лучший вариант я с удовольствием его приму и даже размещу у себя в блоге. Возможно просто необходимо в компонент вставить какую то одну php строчку и резальтат будет таким же.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?
 

Все материалы раздела