Añadir boton imagen

vicion · #1 (**permalink**) 26/01/2012, 19:17

hola bueno queria saber si alguien me puede dar una mano en como poner un boton como este

para que pueda agregar imagenes a mi post ya q por ahora solo puedo publicar texto.

este es mi codigo:

Código PHP:

Ver original<?php
header("Content-Type: text/html;charset=utf-8");
// incluimos el archivo de conexion
include ('conexion.php');
// recibimos el formulario
if(isset($_POST['enviar']) && $_POST['enviar'] == 'Enviar'){
// comprobamos que el formulario no envie campos vacios
if(!empty($_POST['notTitulo']) && $_POST['notTexto'] &&
$_POST['notCategoriaID']){
// creamos las variables y les asignamos los valores a insertar
$notTitulo = $_POST['notTitulo'];
$notTexto = $_POST['notTexto'];
$notCategoriaID = $_POST['notCategoriaID'];
// hacemos el INSERT en la BD
$sqlInsertNot = mysql_query("INSERT INTO notiblog
(notTitulo, notTexto, notCategoriaID)
VALUES ('$notTitulo', '$notTexto', '$notCategoriaID')",
$db_link) or die(mysql_error());
// enviamos un mensaje de exito
echo "Los datos fueron gurdados correctamente";
}else{
// si el formulario envia algun campo vacio
// enviamos un mensaje de error
echo "Debe llenar todos los campos del formulario";
}
}
?>
<!-- el formulario -->
<form name="noticia" action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<p>
Título de la Noticia<br />
<input type="text" name="notTitulo" size="50" />
</p>
<p>
Texto de la Noticia<br />
<textarea name="notTexto" rows="10" cols="50"></textarea>
</p>
<p>
Categoría<br />
<select name="notCategoriaID">
<option value="">Escoger de la Lista</option>
<?php
// asignamos una categoria a la noticia
// mediante un select
$sqlQueryCat = mysql_query("SELECT * FROM caterina", $db_link)
or die(mysql_error());
// creamos un bucle while
// que nos muestre todas las categorias
// que tenemos guardadas en la BD
while($rowCat = mysql_fetch_array($sqlQueryCat)){
echo "<option value='$rowCat[cat_ID]'>$rowCat[catCategoria]</option>";
}
?>
</select>
</p>
<p>
<input type="submit" name="enviar" value="Enviar" />
</p>
</form>

geeck22 · #2 (**permalink**) 26/01/2012, 19:30

sencillo, primero crea el boton y con un poco de javascript configuralo para que al pinchar clic agrege [img] [/img]o algo por el estilo a tu textarea Ó que abra una ventana del navegador preguntando la url de la imagen.
en cualquiera de los dos casos la url de la imagen ira dentro de esas dos etiquetas.

una vez tengas este texto como un post o get en tu formulario remplazas [img] con str remplace por: ' <img src=" ' y [/img] asi: ' " /> ' de modo que cuando lo guardes en la bd se guarde como <img src="url.com/imagen.jpg" /> y aparesca en tu post

Espero haberte ayudado.
PD: este ejemplo seria en el caso de una imagen externa

geeck22 · #3 (**permalink**) 26/01/2012, 19:31

tambien puedes descargar aplicaciones prediseñadas como la herramienta de post de este mismo foro y lo configuras para qe valla con tu web, yo hace mucho hice una aplicacion de estas porque ninguna era como yo la queria, batalle muchisimo e igual perdi el codigo, si no te lo pasaba ;)

esto se llama bbcode

vicion · #4 (**permalink**) 26/01/2012, 19:37

lo voy a buscar como bbcode entonces!! gracias por responder!!!
Saludos!! si por las dudas encuentras el codigo o algo parecido te lo agradeceria de corazon

geeck22 · #5 (**permalink**) 26/01/2012, 19:54

estas de suerte, lo encontre en un usb ;D
ahi te va el codigo
bbcode.php

Código PHP:

  <?php 
function bbcode($texto) { 
    $texto = nl2br($texto); 
    $texto= stripslashes($texto); 
    $texto = str_replace("[codigo]", 'Codigo:<br><div style="background-color:#FFFFFF; margin: 0px; padding: 6px; border: 1px inset; width: 645px; text-align: left; overflow: auto">[codigo]', $texto); 
    $texto = str_replace("[/codigo]", "[/codigo]</div>", $texto); 
     $texto = str_replace('&quot;','"',$texto);  
    $simple_search = array( 
'/\[\:\)\]/is', 
'/\[\:\(\]/is', 
'/\[\;\)\]/is', 
'/\[&lt;3\]/is', 
'/\[\:D\]/is', 
'/\[B\)]/is', 
'/\[\:P\]/is', 
'/\[\:O\]/is', 
'/\[O\;\]/is', 
'/\[Y]/is', 
'/\[N]/is', 
'/\[\:S\]/is', 
'/\[\:\|\]/is', 
'/\[x3]/is', 
'/\[\:\*\]/is', 
'/\:idiot\:/is', 
'/\:hahaha\:/is', 
'/\:aplauso\:/is', 
'/\:olle:/is', 
'/\:zzz\:/is', 
'/\:blah\:/is', 
'/\:banana\:/is', 
'/\:getalife\:/is', 
'/\[cita\](.*?)\[\/cita\]/is', 
'/\[b\](.*?)\[\/b\]/is', 
'/\[i\](.*?)\[\/i\]/is', 
'/\[u\](.*?)\[\/u\]/is', 
'/\[link\](.*?)\[\/link\]/is', 
'#\[codigo\](.*?)\[\/codigo\]#se', 
'/\[youtube\](.*?)\[\/youtube\]/is', 
'/\[img\=chica](.*?)\[\/img]/is', 
'/\[img\=mediana](.*?)\[\/img]/is', 
'/\[img\=grande](.*?)\[\/img]/is', 
'/\[center\](.*?)\[\/center\]/is', 
'/\[left\](.*?)\[\/left\]/is', 
'/\[right\](.*?)\[\/right\]/is', 
'/\[justify\](.*?)\[\/justify\]/is', 
'/\[lista\-punto\](.*?)\[\/lista\-punto\]/is' 
);  
    $simple_replace = array( 
'<img src="http://tuweb.com/bbcode/emoticons/).gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/(.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/;).gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/3.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/D.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/BD.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/P.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/o.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/o;.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/Y.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/N.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/s.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/l.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/x3.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/B).gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/idiot.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/lol.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/aplauso.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/olle.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/zzz.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/blah.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/banana.gif">', 
'<img src="http://tuweb.com/bbcode/emoticons/getalife.gif">', 
'<blockquote>Cita:<br><table style="background-color:#E8E8E8; border:solid 1px #000000; border-left: solid 5px; padding: 5px;"><tr><td width="400">$1</td></tr></table></blockquote>', 
'<span style="font-weight:bold">$1</span>', 
'<span style="font-style:italic">$1</span>', 
'<span style="text-decoration:underline">$1</span>', 
'<a href=$1 target="_blank">$1</a>', 
"highlight_string(stripslashes(html_entity_decode(str_replace('<br />','','$1'))), true)", 
'<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>', 
'<img width="320" src="$1">', 
'<img width="480" src="$1">', 
'<img width="640" src="$1">', 
'<div style="text-align: center;">$1</div>', 
'<div style="text-align: left;">$1</div>', 
'<div style="text-align: right;">$1</div>', 
'<div style="text-align: justify;">$1</div>', 
'<li>$1</li>' 
); 
$texto = preg_replace ($simple_search, $simple_replace, $texto);  
return $texto;  
} 
?>

geeck22 · #6 (**permalink**) 26/01/2012, 19:54

bbcode.js

Código Javascript:

Ver originalfunction instag(tag){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = "[" + tag + "]" + str + "[/" +tag+ "]";
sel.select();
return;
}
else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + '['+tag+']' + insText + '[/'+tag+']'+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}
else{
input.value+=' ['+tag+'][/'+tag+']';
return;
}
}
function insicon(icon){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = "[" + icon + "]";
sel.select();
return;
}
else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + '['+icon+']' + input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}
else{
input.value+=' ['+icon+'] ';
return;
}
}function inscara(cara){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = ":" + cara + ":";
sel.select();
return;
}
else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + ':'+cara+':' + input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}
else{
input.value+=' :'+cara+': ';
return;
}
}
function inslink(){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Ingresar URL:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[link]" + str + "[/link]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Ingresa la URL:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[link]" + insText + "[/link]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL:","http://");
var my_text = prompt("Ingresar el texto del link:","");
input.value+=" [link]" + my_text + "[/link]";
return;
}
}
function insimgch(){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Ingresar URL de la Imagen chica:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[img=chica]" + str + "[/img]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Ingresa la URL de la Imagen chica:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[img=chica]" + insText + "[/img]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL de la Imagen chica:","http://");
var my_text = prompt("Ingresar URL de la Imagen chica:","");
input.value+=" [img=chica]" + my_text + "[/img]";
return;
}
}
 
function insimgmd(){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Ingresar URL de la Imagen mediana:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[img=mediana]" + str + "[/img]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Ingresa la URL de la Imagen mediana:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[img=mediana]" + insText + "[/img]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL de la Imagen mediana:","http://");
var my_text = prompt("Ingresar URL de la Imagen mediana:","");
input.value+=" [img=mediana]" + my_text + "[/img]";
return;
}
}
 
function insimggd(){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Ingresar URL de la Imagen grande:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[img=grande]" + str + "[/img]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Ingresa la URL de la Imagen grande:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[img=grande]" + insText + "[/img]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL de la Imagen grande:","http://");
var my_text = prompt("Ingresar URL de la Imagen grande:","");
input.value+=" [img=grande]" + my_text + "[/img]";
return;
}
}
 
function insyt(){
var input = document.form1.textarea;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Nota: el ID se extrae de la URL del video.\nEjemplo: http://www.youtube.com/watch?v= -> wTnsBP9u-TQ <-\nIngresar ID del video:","");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "[youtube]" + str + "[/youtube]";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Nota: el ID se extrae de la URL del video.\nEjemplo: http://www.youtube.com/watch?v= -> wTnsBP9u-TQ <-\nIngresar ID del video:","");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"[youtube]" + insText + "[/youtube]"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Nota: el ID se extrae de la URL del video.\nEjemplo: http://www.youtube.com/watch?v= -> wTnsBP9u-TQ <-\nIngresar ID del video:","");
var my_text = prompt("Nota: el ID se extrae de la URL del video.\nEjemplo: http://www.youtube.com/watch?v= -> wTnsBP9u-TQ <-\nIngresar ID del video:","");
input.value+=" [youtube]" + my_text + "[/youtube]";
return;
}
}

en el head del documento donde este el formulario pones: <script src="bbcode/bbcode.js"></script>

y donde proceses el formulario le haces un include a bbcode: include("bbcode/bbcode.php");

y por ultimo le pasas el js a tu $_POST de esta manera: $post = bbcode($_POST['post']);

geeck22 · #7 (**permalink**) 26/01/2012, 19:55

ya solo te falta a ti agregar los botones y si gustas emoticones ;)

Recuerda.. no es perfecto mi codigo pero sirve! :P ya tiene tiempo asi qe no te fijes :A

vicion · #8 (**permalink**) 26/01/2012, 21:44

mil gracias la verdad!!
ahora me fijo bienn!!!
te comento como me fue!!!

mil gracias Saludos!!