Кнопка "Вставить Картинку"

Помогите пожалуйста:
(скриншот ниже)
Как сделать такую кнопку (1), при нажатии на которую открывалось бы окно (2) и в итоге вставлялось бы в поле для ввода текст (3)?
Стандратный загрузчик не устраивает тем, что он может заливать на сервер свой. А мне вот нужно только чтобы ссылку вставляли уже готовую… Спасибо.

13 комментариев

avatar
что-то под номером 1 я ни какой кнопки не вижу o_O
avatar
я ее и хочу создать.
avatar
Она как бы предполагается))
avatar
Что-то вроде этого.

Открыть js/panel.js и найти
putTagUrl: function(obj,sPromt) {

ВЫШЕ втсаивть
putTagUrlImg: function(obj,sPromt) {
		obj=$(obj);
		if (url=prompt(sPromt,'http://')) {
			var sel=obj.getSelectedText();
        	this.putText(obj,'<img src="'+url+'" alt="" align="" />');
        }
	},


Далее открыть actions/ActionTopic/add.tpl и добавить к BBкодам это
<a href="#" onclick="lsPanel.putTagUrlImg('topic_text','{$aLang.panel_url_promt}'); return false;"><img src="{$DIR_STATIC_SKIN}/img/panel/img.gif" width="19" height="19" title="{$aLang.panel_image}"></a>


Это простое решение. Хотя можно было бы сделать более удобно. Добавить alt, width… в окошко для заполнения…
  • _et
  • 0
avatar
Ой. забыл убрать
var sel=obj.getSelectedText();
avatar
хм… что-то нету. вот у меня какой panel.js

var clientPC = navigator.userAgent.toLowerCase();
var clientVer = parseInt(navigator.appVersion);
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;
var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

function voidPutURL(context)
{       if (url=prompt('Введите ссылку','http://'))
        {
        var m=document.getElementById(context);
        if(m){
               m.focus();

             if ((clientVer >= 4) && is_ie && is_win)
             {
               sel = document.selection.createRange();

               sel.text = "<a href=\""+url+"\">"+sel.text+'</a>';
             } else
             {
               mozWrap(m, "<a href=\""+url+"\">",'</a>');
             }
             m.focus();
             }
         }
}

function voidPutTag2(context,tag)
{
        var m=document.getElementById(context);
        if(m){
               m.focus();
             if ((clientVer >= 4) && is_ie && is_win)
             {
               sel = document.selection.createRange();

               sel.text = "<"+tag+">"+sel.text+'</'+tag+'>';
             } else
             {
               mozWrap(m, "<"+tag+">", '</'+tag+'>');
             }
             m.focus();
             }
}

function voidPutTag(context,tag){
        var m=document.getElementById(context);
        if(m){

                if(document.selection){
                        m.focus();
                        sel=document.selection.createRange();
                        sel.text=tag;
                }
                else if(m.selectionStart || m.selectionStart=="0") {
                        var s=m.selectionStart;
                        var e=m.selectionEnd;
                        m.value=m.value.substring(0,s)+tag+m.value.substring(e,m.value.length);
                }else{
                        m.value += tag;
                }
                m.focus();
        }
}

function mozWrap(txtarea, open, close)
{
        var selLength = txtarea.textLength;
        var selStart = txtarea.selectionStart;
        var selEnd = txtarea.selectionEnd;
        if (selEnd == 1 || selEnd == 2)
                selEnd = selLength;

        var s1 = (txtarea.value).substring(0,selStart);
        var s2 = (txtarea.value).substring(selStart, selEnd)
        var s3 = (txtarea.value).substring(selEnd, selLength);
        txtarea.value = s1 + open + s2 + close + s3;
        return;
}
avatar
А что за шаблон такой?
avatar
какой-то старый, аля хабр
avatar
не знаешь как в него вставить эту кнопку?
avatar
Тут не знаю как сделать. У меня такого шаблона даже нету.
avatar
сам разобрался)) нужно было вот это написать:

function voidPutIMG(context)
{       if (url=prompt('Введите адрес картинки','http://'))
        {
        var m=document.getElementById(context);
        if(m){
               m.focus();

             if ((clientVer >= 4) && is_ie && is_win)
             {
               sel = document.selection.createRange();

               sel.text = "<img src=\""+url+"\">"+sel.text+'';
             } else
             {
               mozWrap(m, "<img src=\""+url+"\">",'');
             }
             m.focus();
             }
         }
}
avatar
ты хочешь новое окно чтобы загружать картинку… а зачем? если есть уже старое, которое можно просто отредактировать как тебе нужно. А как, что и где редактировать спрашивай у знающих
avatar
Так как задача сводится к тому, чтобы вместо загрузчика просто вставлять URL. То есть те же самые действия, что и при вставке ссылки, получилось такое простое решение:

В файле /templates/skin/%SKIN_NAME%/actions/ActionTopic/add.tpl заменяем
<a href="#" onclick="showImgUploadForm(); return false;" class="button"><img src="{$DIR_STATIC_SKIN}/images/panel/img.gif" width="20" height="20" title="{$aLang.panel_image}"></a>

на
<a href="#" onclick="lsPanel.putTagImg('topic_text','{$aLang.panel_url_promt}'); return false;" class="button"><img src="{$DIR_STATIC_SKIN}/images/panel/img.gif" width="20" height="20"  title="{$aLang.panel_url}"></a>

Дальше в файле /templates/skin/%SKIN_NAME%/js/panel.js после putTagUrl добавляем функцию putTagImg
putTagImg: function(obj,sPromt) {
		obj=$(obj);
		if (url=prompt(sPromt,'http://')) {
        	this.putText(obj,'<img src="'+url+'">');
        }
	},

И всё работает.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.