Foros del Web » Creando para Internet » Diseño web »

ayuda con precesamiento de un textarea

Estas en el tema de ayuda con precesamiento de un textarea en el foro de Diseño web en Foros del Web. Hola a todos/as. Estoy haciendo una wep personal, para almacenar mis documentos. Documentos que son relacionados con la informática, y donde explico cosas y expongo ...
  #1 (permalink)  
Antiguo 02/01/2010, 08:52
Avatar de zibor  
Fecha de Ingreso: diciembre-2006
Mensajes: 80
Antigüedad: 11 años
Puntos: 1
Mensaje ayuda con precesamiento de un textarea

Hola a todos/as.
Estoy haciendo una wep personal, para almacenar mis documentos. Documentos que son relacionados con la informática, y donde explico cosas y expongo lineas de codigo. Esa es la idea. Utilizo html, css, php, mysql y javascript, de este ultimo tengo pocos conocimientos.

He hecho un portal donde poderse registrar y cada usuario tiene la posibilidad de guardar sus documentos.
Le muestro un formulario.

FORMULARIO.php

Cita:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="modulos/Textarea/style.css">
<script type="text/javascript" language="javascript" src="modulos/Textarea/scripts.js"></script>
</head>
<body>
<div class="formu">
<form name="m_formulario" method="post" action="index.php?pagina=modulos/Textarea/recoge.php" enctype="multipart/form-data">

<div class="titulo">
<div class="t1">TITULO: </div>
<div class="t2"><input type="text" name="titulo"></div>
<div id="title" style="display:none; color:red"> Titulo invalido</div>
</div>
<div class="titulo">
<div class="t1">TEMA: </div>
<div class="t2">
<select name="tema">
<option>- - - -</option><? tema(); ?>
</select>
<div id="teme" style="display:none; color:red"> Tema invalido</div>
</div>
</div>

<div class="textarea">
<div class="botones">
<input type="button" class="negrita" onclick="codigo('<b>','</b>')" title="Negrita" />
<input type="button" class="cursiva" onclick="codigo('<i>','</i>')" title="Cursiva" />
<input type="button" class="subrayado" onclick="codigo('<u>','</u>')" title="Subrayado" />
<input type="button" class="tachado" onclick="codigo('<s>','</s>')" title="Tachado" />
<input type="button" class="link" onclick="codigo('<a>','</a>')" title="Link" />
<input type="button" class="lista1" onclick="codigo('<ul><li>','</li></ul>')" title="Lista no numerada" />
<input type="button" class="lista2" onclick="codigo('<ol><li>','</li></ol>')" title="Lista numerada" />
<input type="button" class="code" onclick="codigo('<pre>','</pre>')" title="Insertar codigo" />
</div>

<div class="texto">
<textarea name="texto" cols="80" rows="20"></textarea>
<div id="teditor" style="display:none; color:red"> Texto invalido</div>
</div>
</div>

<div class="botones2">
<input class="b1" type="button" name="Enviar" value="Enviar" onclick="validarFormulario()">
<input class="b2" type="reset" name="Limpiar" value="Limpiar">
</div>
<div class="pre">//pruebas
<?
$cadena="<pre> <b>Codigo</b> </pre>";
$c=htmlentities($cadena);
echo $c;
$clave="<pre>";
$rem="<pre class='pre'>";
$cl=htmlentities($clave);
$r=htmlentities($rem);
$n=ereg_replace($clave,$rem,$c);

echo "<br>n: ".$n;
?></div>
</form>
</div>
</body>
</html>

<?
function tema()
{
$link=abrirBD();
$sql="SELECT nombre FROM temas";
$resul=mysql_query($sql,$link);

while($tema=mysql_fetch_array($resul))
{
echo "<option value='".$tema["nombre"]."'>".$tema["nombre"]."</option>";
}

errores($link);
cerrarBD($link);
}

?>

incluye 2 archivos.

BD.php

Cita:
<?
/*
* Abre y seleciona la base de datos
* Cierra la base de datos
* Muestra el error
*/
function abrirBD()
{
$link = mysql_connect("localhost","usuario","usuario") or die("Imposible conectar.");
mysql_select_db("documentos", $link);
return $link;
}
function cerrarBD($c)
{
mysql_close($c);
}

function errores($con)
{
$num=mysql_errno($con);
$desc=mysql_error($con);
if($num != 0)
{
echo "<p><b>ERROR: </b>".$num."</p>";
echo "<p><b>DESCRIPCION: </b>".$desc."</p>";
}
}
?>
y

SCRIPTS.js

Cita:
function codigo(a,b)
{
// creamos una variable y le definimos el contenido, en este caso es el textarea del formulario
c = document.m_formulario.texto ; // El 1º parametro es para asignar el formulario, el 2º es el nombre del formulario y el 3º es el nombre del textarea
// Si el navegador es el IE
if(navigator.appName == 'Microsoft Internet Explorer')
{
if(seleccionado = document.selection.createRange().text)
{
document.selection.createRange().text = a+seleccionado+b ;
c.focus() ;
}
else
{
c.focus() ;
document.selection.createRange().text = a+b ;
}
}
else
{
c.value = c.value.substring(0,c.selectionStart)+a+c.value.su bstring(c.selectionStart,c.selectionEnd)+b+c.value .substring(c.selectionEnd,c.value.length) ;
c.focus() ;
}
}


function validarFormulario()
{
var isNotOk;

//validacion titulo

var titulo = window.document.m_formulario.titulo.value;
if (titulo=="")
{
document.getElementById("title").style.display="in line";
isNotOk=true;
}
else
{
document.getElementById("title").style.display="no ne";
}

//validacion tema

var tema = window.document.m_formulario.tema.selectedIndex;
if (tema==0)
{
document.getElementById("teme").style.display="inl ine";
isNotOk=true;
}
else
{
document.getElementById("teme").style.display="non e";
}

//validacion textarea

var texto = window.document.m_formulario.texto.value;
if (texto=="")
{
document.getElementById("teditor").style.display=" inline";
//window.document.m_formulario.texto.focus();
//return 0;
isNotOk=true;
}
else
{
document.getElementById("teditor").style.display=" none";
}


if (isNotOk)
{
return 0;
}
else
{
window.document.m_formulario.submit();
}
}
El formulario no es mas que un input para el titulo, un select para elegir un tema, y un textarea, donde puedes modificar lo introducido editando la fuente en negrita, cursiva, subrayado. He añadido un boton que pone CODE, para al darle que me ponga alguna etiqueta para diferenciar el texto explicativo del codigo. Algo parecido como el formulario se utiliza en este foro. Al darle enviar la idea es que se guarde toda la informacion a una base de datos, pero por el momento solo tengo que me muestre en pantalla lo que se manda por el formulario.

Me surgen varios problemas.

- Cuando le doy a enviar al rellenar todos los campos, quiero darle un estilo propio al codigo que se introduce al textarea y asi separar visualmente el codigo del texto explicativo.

- En el textarea tengo botones para etiquetas faciles como puede ser
Cita:
<b> texto </b>
pero quiero poner tambien un boton para vinculos, pero soy incapaz de hacerlo funcionar.

Solo darle las gracias por leerlo y por las posibles ayudas.

Saludos.
  #2 (permalink)  
Antiguo 23/02/2010, 02:33
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: ayuda con precesamiento de un textarea

Buenas,

Porqué no usas un editor ya echo?
Prueba tinyMCE, yo suelo usar este.
También me gusta el que trae Ext JS pero para usarlo, tienes que cargar casi toda la librería.

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #3 (permalink)  
Antiguo 23/02/2010, 05:03
 
Fecha de Ingreso: octubre-2009
Mensajes: 111
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: ayuda con precesamiento de un textarea

Yo siempre he usado FCK es super sencillo ;)
__________________
Frases de amor | Cartas de amor.

Etiquetas: textarea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:42.