ayuda con precesamiento de un textarea 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);
}
?>
<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:
y<?
/*
* 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>";
}
}
?>
/*
* 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>";
}
}
?>
SCRIPTS.js
Cita:
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.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();
}
}
{
// 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();
}
}
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:
pero quiero poner tambien un boton para vinculos, pero soy incapaz de hacerlo funcionar.<b> texto </b>
Solo darle las gracias por leerlo y por las posibles ayudas.
Saludos.
