Добавление картинки в пост кнопкой
Теги:
Как то я сидел на своем форуме и думал, как бы его ещё улучшить, и мне в голову пришла мысль о том, что неплохо было бы сделать возможность добавления картинок в пост нажатием кнопки а не долгим и нудным копированием условных кодов типа $IMAGE_№$. Сказано - сделано! Полез разбираться, как же можно это провернуть и надыбал вот такой скрипт - в нем содержится 2 функции, которые юзает поле добавления файла в посте, это функции function addImgF() и function getimage(n):
function getimage(n){
var t = document.getElementById('fln'+n);
if (t.value){ext = new Array('png','jpg','gif','jpeg','jpe');
var img = t.value.replace(/\\/g,'/');
var pic = img.toLowerCase();
var ok=0;for (i=0;i<ext.length;i++){m = pic.indexOf('.' + ext[i]);if (m != -1) {ok=1;break;}}
if (ok==1){var code='$IMAGE'+n+'$'; document.getElementById('iCode'+n).innerHTML=' <input type="text" readonly onClick="select(this)" name="h1" value="'+code+'" title="Вставьте этот код в любое место сообщения" size="'+(code.length)+'" style="font-family:\'courier new\';text-align:center;background:#F0F0F0;color:#0000FF;border:1px inset"> <input style="font:7pt;color:gray;" type="text" name="iws'+n+'" value="600" size="4" maxlength="4" title="Width">x<input style="font:7pt;color:gray;" type="text" name="ihs'+n+'" value="1000" size="4" maxlength="4" title="Height">';}
else {document.getElementById('iCode'+n).innerHTML='';}}
else {document.getElementById('iCode'+n).innerHTML='';}
}
function addImgF(){
var num=parseInt(document.getElementById('numi').value);
if (num<10){if (num<1){num+=2;}else {num+=1;}document.getElementById('imblock').innerHTML+='<div style="clear:both;float:left;width:29px;text-align:center;">['+num+']</div> <input type="file" id="fln'+num+'" class="uplFileFl" name="file'+num+'" size="20" onchange="getimage('+num+');"><span id="iCode'+num+'"></span><br>'; document.getElementById('numi').value=num;}
if (num>=10) {document.getElementById('iplus').innerHTML='<div style="clear:both;float:left;width:29px;text-align:center;">[1]</div> ';}
}</script>
В этом скрипте функция function addImgF() как раз и задает появление уродливого поля с синим кодом картинки, который надо копировать в пост, а функция function addImgF() срабатывает при нажатии на кнопку с крестиком, тоесть добавляет поле для закачки ещё одной картинки..
Стало быть их нужно менять.. А как? Кстати ныне покупать недвижимость в Ряжске — чертовски выгодное занятие. Я планирую купить там пару гектаров бетонных угодий как только узнаю где находится Ряжск. Ну да ладно. Скрипт то сама cms вставляет - его не переделаешь.. значит пишем свой скрипт, вставляющий вместо тупого текстареа нужную нам кнопочку с онкликом:
function addtopost(n){
var t = document.getElementById('fln'+n);
if (t.value){ext = new Array('png','jpg','gif','jpeg','jpe');
var img = t.value.replace(/\\/g,'/');
var pic = img.toLowerCase();
var ok=0;for (i=0;i<ext.length;i++){m = pic.indexOf('.' + ext[i]);if (m != -1) {ok=1;break;}}
if (ok==1){var code='$IMAGE'+n+'$'; document.getElementById('iCode'+n).innerHTML=' <input title="Добавить картинку в пост" value="Добавить картинку в сообщение" onclick="emoticon(\''+code+'\');return false;" type="button"> <input style="font:7pt;color:gray;" type="text" name="iws'+n+'" value="600" size="4" maxlength="4" title="Width">x<input style="font:7pt;color:gray;" type="text" name="ihs'+n+'" value="1000" size="4" maxlength="4" title="Height">';}
else {document.getElementById('iCode'+n).innerHTML='';}}
else {document.getElementById('iCode'+n).innerHTML='';}
}
function addnewfild(){
var num=parseInt(document.getElementById('numi').value);
if (num<10){if (num<1){num+=2;}else {num+=1;}document.getElementById('imblock').innerHTML+='<div style="clear:both;float:left;width:29px;text-align:center;">['+num+']</div> <input type="file" id="fln'+num+'" class="uplFileFl" name="file'+num+'" size="20" onchange="addtopost('+num+');"><span id="iCode'+num+'"></span><br>'; document.getElementById('numi').value=num;}
if (num>=10) {document.getElementById('iplus').innerHTML='<div style="clear:both;float:left;width:29px;text-align:center;">[1]</div> ';}
}
</script>
Функции в своем скрипте обзываем иначе чем в оригинале, а сам скрипт вставляем в шаблон вида формы добавления мессаджей. Теперь дело за малым - нужно только заставить эту дурацкую форму при её использовании обращаться к нашему скрипту а не к старому. тут юзаем мой любимый innerHTML в самом конце body:
txt = document.body.innerHTML;
addinpost = 'onchange="getimage';
while (txt.indexOf(addinpost)>=0) txt = txt.replace(addinpost, 'onchange="addtopost');
addinpost2 = 'onclick="addImgF';
while (txt.indexOf(addinpost2)>=0) txt = txt.replace(addinpost2, 'onclick="addnewfild');
document.body.innerHTML = txt;
Этот скриптик будет подменять названия функций, к которым будет обращаться форма, в самой форме. И.. вуаля)) Теперь на http://studioad.ru все картинки в постах можно вставить просто нажав на кнопку "Добавить картинку в пост".
Ещё один минус стандартных форумов Ucoz исправлен.
