elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como hacer un texto en negrita con contentEditable		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como hacer un texto en negrita con contentEditable  (Leído 4,071 veces)
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
como hacer un texto en negrita con contentEditable
« en: 22 Marzo 2013, 17:33 pm »
wenass ante todo gente del foro, necesito que al seleccionar un boton me ponga el texto en negrita, es decir que si selecciono:

Código:
<div id="negrita" contentEditable="true">
    Acá puedes escribir
</div>

pueda escribir y que luego aprete un boton y lo que yo quiera me lo cambie a negrita y otro para cursiva que proximamente lo pondre,etc, con esto que no esta terminado:

Código:
<script type="text/javascript" >
$('#negrita').css('font-weight','bold');
</script>

muchas gracias x saber la respuesta
« Última modificación: 22 Marzo 2013, 18:13 pm por tecasoft » En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
kalvinman

Desconectado Desconectado

Mensajes: 25

Lorem ipsum dolor sit amet...


Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #1 en: 22 Marzo 2013, 23:58 pm »
Si lo que estas buscando es un editor en pantalla deberias probar con algun editor WYSIWYG (What You See Is What You Get) como CKEditor, Tiny MCE, etc
En línea
Recolector de contenidos Hackers, Gamers, Webmasters y mas...
Peliculas online Gratis
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #2 en: 24 Marzo 2013, 00:31 am »
me gustaria hacer 1 yo mismo nada de codigo de terceros, me podrias ayudar un poco, gracias
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
dank_

Desconectado Desconectado

Mensajes: 21


Ver Perfil
Re: como hacer un texto en negrita con contentEditable
« Respuesta #3 en: 24 Marzo 2013, 04:43 am »
Mira este tutoríal.

http://www.youtube.com/watch?v=SSAQK4Nwkm4

Obviamente puedes usar un div con contentEditable en lugar del iFrame como se ve en el vídeo. La vedad yo también tenía mucha curiosidad por saber como se hacen estas cosas y parece que resultó más sencillo de lo que imaginé.
En línea
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #4 en: 24 Marzo 2013, 16:42 pm »
 ;-)  ;-) gracias  un 10  ;-)

pero ahora viene un problemilla que tengo con publicar y vista previa, alguien que me sepa del tema y me pueda ayudar:

editor.php

Código:
<html>
<head>

<meta charset="utf-8">
	<title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">

</head>
<body>

<div id="editor_contenido">

<a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
<input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;

<a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
<a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
<a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
<a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;

<img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;

<a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;

<a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
<a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;

<a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
<a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
<a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;

<a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
<a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
<a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
<a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
<a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
<a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;

<a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
<a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;

<a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;

<a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;

<input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">

<br>

<hr>
</div>


<div id="contenedor">
	<center>

		<div id="cabecera">
		
			<div id="logo">
			
			<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
			
			</div>
		
			<div id="anexo">
			
			<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar ▼)</a>			
			
			</div>
				
		</div>

<!-- Menu navegador -->

		<div id="navegador">
		
		
		
		
		
		
		</div>

<!-- El contenido central -->

	<div id="contenido">
	
		<h1 class="naranja">Inicie Sesión</h1>

		<form action="login.php" method="post" name="form1">
		
		<label for="usuario">Usuario:</label>
		<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
		&nbsp;&nbsp;&nbsp;
		<label for="contrasena">Contraseña:</label>
		<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>



		<input type="button" class="tv_sim" value="1">
		<input type="button" class="tv_sim" value="2">
		<input type="button" class="tv_sim" value="3">
		<input type="button" class="tv_sim" value="4">
		<input type="button" class="tv_sim" value="5">
		<input type="button" class="tv_sim" value="6">
		<input type="button" class="tv_sim" value="7">
		<input type="button" class="tv_sim" value="8">
		<input type="button" class="tv_sim" value="9">
		<input type="button" class="tv_sim" value="0">
		
		<input type="button" id="backspace" value="←">
		<br>

<!-- Cambia a mayusculas y minusculas -->
		<input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->

		<input type="button" class="tv_let" value="q">
		<input type="button" class="tv_let" value="w">
		<input type="button" class="tv_let" value="e">
		<input type="button" class="tv_let" value="r">
		<input type="button" class="tv_let" value="t">
		<input type="button" class="tv_let" value="y">
		<input type="button" class="tv_let" value="u">
		<input type="button" class="tv_let" value="i">
		<input type="button" class="tv_let" value="o">
		<input type="button" class="tv_let" value="p">
		<br>
		<input type="button" class="tv_let" value="a">
		<input type="button" class="tv_let" value="s">
		<input type="button" class="tv_let" value="d">
		<input type="button" class="tv_let" value="f">
		<input type="button" class="tv_let" value="g">
		<input type="button" class="tv_let" value="h">
		<input type="button" class="tv_let" value="j">
		<input type="button" class="tv_let" value="k">
		<input type="button" class="tv_let" value="l">
		<input type="button" class="tv_let" value="ñ">
		<br>
		<input type="button" class="tv_let" value="z">
		<input type="button" class="tv_let" value="x">
		<input type="button" class="tv_let" value="c">
		<input type="button" class="tv_let" value="v">
		<input type="button" class="tv_let" value="b">
		<input type="button" class="tv_let" value="n">
		<input type="button" class="tv_let" value="m">
		
		<input type="button" class="tv_sim" value="-">
		<input type="button" class="tv_sim" value="_">
		<input type="button" class="tv_sim" value="@">
		<input type="button" class="tv_sim" value="#">


		<br><br>
		<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
		&nbsp;&nbsp;&nbsp;		
		<input type="submit" class="boton" value="Iniciar sesión">
		</form>
	</div>
		
<!-- Pie Pagina -->	
		
		<div id="pie">

		<hr>

		<div id="pie-izq">
		
		<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
		<span class="pie-izq">Hora: </span>
			
		
		</div>

		<div id="pie-der">

		<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
		
		
		</div>
	
	<br><br>	
	
	</div>
		
	
	</center>

</div>

<script type="text/javascript" >

$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>

<script type="text/javascript" src="js/wysiwyg.js"></script>

</body>
</html>

quiero que se vea el "contenedor"

estilos_clientes.css

Código:
:link,:visited { text-decoration:none } :focus,:active { outline: 0 }
a { color: black; }

/* Contenedor contiene todo */
#contenedor { text-align:left; width: 1000px; margin: auto; margin-top: 10px; float: center; }


/* Cabecera */
#cabecera { width: 1000px; }

#logo { float: left; width: 150px; }

#anexo { float: right; width: 350px; }

.anexo { color: gray; font-size: 70%; }

/* Navegador */
#navegador { float: left; width: 1000px; height: 40px; background-color: black; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */
opacity: 0.7; filter: alpha(opacity=70); /* Transparencias */}


#nav-izq { float: left; width: 600px; margin-top: 10px; }

.nav-izq { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


#nav-der { float: right; width: 300px; margin-top: 10px; }

.nav-der { color: white; font-size: 90%; margin-right: 1%; font-weight: bold; }


/* Contenido */
#contenido { float: left; width: 1000px; margin-top: 10px; }

#columna1, #columna2, #columna3, #columna4, #columna1-votaciones, #columna1-sitemap {border-top: 2px solid orange;
border-right: 2px solid orange;
border-bottom: 2px solid orange;
border-left: 2px solid orange; }

#columna1 { float: left; width: 680px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-1 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-2 { float: right; width: 300px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-3 { float: left; width: 300px; background-color: orange; margin-left: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna1-4 { float: right; width: 320px; background-color: orange; margin-right: 20px; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}



#columna2 { float: right; width: 300px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

#columna3 { float: right; width: 300px; background-color: Gainsboro; margin-top: 10px;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* tablas diseño web */
#table-1 { float: left; margin-left: 80px; margin-top: 10px; }

#table-2 { float: right; margin-right: 80px; margin-top: 10px; }



/* sitemap */
#contenido-sitemap { float: left; width: 1000px; margin-top: 10px; }

#columna1-sitemap { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 100px 100px; /* Redondeado */
-webkit-border-radius: 100px 100px; /* Redondeado */}

/* margin-top*/

#margen-superior { margin-top: 10px; } 

/* pie */
#pie { float: left; width: 1000px; }

#pie-izq { float: left; width: 700px; }

.pie-izq { color: gray; font-size: 70%; }


#pie-der { float: right; width: 200px; }

.pie-der { color: gray; font-size: 70%; }

/* Contenido-votaciones */

#columna1-votaciones { float: left; width: 1000px; background-color: Gainsboro;
-moz-border-radius: 10px 10px; /* Redondeado */
-webkit-border-radius: 10px 10px; /* Redondeado */}

/* Contenido clientes */
.naranja { color: orange; }

/* Contenido clientes Botones Menu Editar */
.boton_publicar , .boton_vista_previa , .boton_opciones { font-size: 10px; }

wysiwyg.js

Código:
// Botones del menu Editor
$(".boton_publicar").button(); $(".boton_vista_previa").button();

$(".negrita").button(); $(".cursiva").button(); $(".tachado").button(); $(".subrayar").button();

$(".maquetacion").button();

$(".color").button();

$(".lista_con_vinetas").button(); $(".lista_numerada").button();

$(".alinear_izquierda").button(); $(".centrar").button(); $(".alinear_derecha").button(); $(".justificado").button();

$(".h1").button(); $(".h2").button(); $(".h3").button(); $(".h4").button(); $(".h5").button(); $(".h6").button();

$(".insertar_enlace").button(); $(".eliminar_enlace").button();

$(".hr").button();

$(".insertar_imagen").button();

$(".boton_opciones").button();
// End Botones del menu Editor

// ContentEditable cabecera
$("#contenedor").get(0).contentEditable = "true";
// End ContentEditable cabecera

// Negrita
$('#negrita').click(function(){
		document.execCommand('bold',false,null);
		return false;
});
// End Negrita

// Cursiva
$('#cursiva').click(function(){
		document.execCommand('italic',false,null);
		return false;
});
// End Cursiva

// Tachado
$('#tachado').click(function(){
		document.execCommand('strikethrough',false,null);
		return false;
});
// End Tachado

// Subrayar
$('#subrayar').click(function(){
		document.execCommand('underline',false,null);
		return false;
});
// End Subrayar







// Maquetacion
// calendar.gif
// End maquetacion 

// Color
$('#color').click(function(){
	var color = prompt("Introduzca el nombre del color deseado buscando los colores en ingles en la siguiente direccion: http://es.wikipedia.org/wiki/Colores_web#Tabla_de_colores","");
		document.execCommand('ForeColor',false,color);
		return false;
});
// End color








// Lista con viñetas
$('#lista_con_vinetas').click(function(){
		document.execCommand('InsertUnorderedList',false,"newUL");
		return false;
});
// End Lista con viñetas

// Lista Numerada
$('#lista_numerada').click(function(){
		document.execCommand('InsertOrderedList',false,"newOL");
		return false;
});
// End Lista Numerada

// Alinear a la izquierda, centrar, alinear a la derecha, justificado
$('#alinear_izquierda').click(function(){
		document.execCommand('JustifyLeft',false,null);
		return false;
});
$('#centrar').click(function(){
		document.execCommand('JustifyCenter',false,null);
		return false;
});
$('#alinear_derecha').click(function(){
		document.execCommand('JustifyRight',false,null);
		return false;
});
// End alinear a la izquierda, centrar, alinear a la derecha, justificado

// h1,h2,h3,h4,h5,h6
$('#h1').click(function(){
		document.execCommand('FontSize',false,1);
		return false;
});
$('#h2').click(function(){
		document.execCommand('FontSize',false,2);
		return false;
});
$('#h3').click(function(){
		document.execCommand('FontSize',false,3);
		return false;
});
$('#h4').click(function(){
		document.execCommand('FontSize',false,4);
		return false;
});
$('#h5').click(function(){
		document.execCommand('FontSize',false,5);
		return false;
});
$('#h6').click(function(){
		document.execCommand('FontSize',false,6);
		return false;
});
// End h1,h2,h3,h4,h5,h6

// Insertar enlace, eliminar enlace
$('#insertar_enlace').click(function(){
	var linkURL = prompt("Introduzca la URL en este enlace:","http://");
		document.execCommand('CreateLink',false,linkURL);
		return false;
});
$('#eliminar_enlace').click(function(){
		document.execCommand('Unlink',false,null);
		return false;
});
// End Insertar enlace, eliminar enlace

// hr
$('#hr').click(function(){
		document.execCommand('inserthorizontalrule',false,null);
		return false;
});
// End hr

// Insertar imagen
$('#insertar_imagen').click(function(){
	var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
	if(imgSrc != null){
		document.execCommand('insertimage',false, imgSrc);
	}
		return false;
	
});
// End Insertar imagen







// Vista previa
$('.boton_vista_previa').click(function(){
	
//var theForm = document.getElementById("contenedor");
theForm2 = document.getElementById('contenedor').innerHTML;
theForm2.submit();

});
//


aqui al final esta el problema^^^^^^^^^^^^^^
« Última modificación: 27 Marzo 2013, 20:57 pm por tecasoft » En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #5 en: 27 Marzo 2013, 21:51 pm »
alguien que pueda hecharle un vistazo  :(
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #6 en: 28 Marzo 2013, 01:11 am »
@tecasoft, bien por utilizar [code] pero por favor utiliza el lenguaje indicado: [code=php] [code=javascript] [code=html4strict] [code=css]

Y pon solo el código conflictivo. Lo que pones (editor.php.. estilos_clientes.css)...  es codigo que no sirve para ver tu problema (requiere login...)


Saludos
En línea
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como hacer un texto en negrita con contentEditable
« Respuesta #7 en: 28 Marzo 2013, 19:00 pm »
no te entendi mucho pero me parece que ahora si que lo he puesto con el numero de linea.

Estaba pensando en enviarlo x medio de <hidden o campo oculto, pero no se como hacerlo o si es la forma correcta...AHORA ESTA MODIFICADO EL ARCHIVO DE ABAJO

pasar el codigo html siguiente que suelta "theForm2" mediante un input via post o se deberia pasar via ftp?¿?o como para visualizarlo, no guardarlo, en una web independiente:

piensa que para editor.php carga una pagina web y esa tiene que tener "vista previa" y un boton para "guardar" la web que se administra.

wysiwyg.js

Código
  1.  
  2. // Vista previa
  3. $('.boton_vista_previa').click(function(){
  4.  
  5. //var theForm = document.getElementById("contenedor");
  6. theForm2 = document.getElementById('contenedor').innerHTML;
  7.  
  8. form_editor.submit();
  9.  
  10. });
  11. //
  12.  
  13.  

editor.php

Código
  1. <html>
  2. <head>
  3.  
  4. <meta charset="utf-8">
  5. 	<title>Tecasoft.com | Editor</title>
  6. <link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
  7. <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  8. <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
  9.  
  10. <link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />
  11.  
  12. <link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">
  13.  
  14. </head>
  15. <body>
  16.  
  17. <div id="editor_contenido">
  18.  
  19. <form action="editor12.php" method="post" target="_blank" name="form_editor">
  20.  
  21. <a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;
  22.  
  23. <input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;
  24. <input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;
  25.  
  26. <a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;
  27. <a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;
  28. <a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;
  29. <a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;
  30.  
  31. <img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;
  32.  
  33. <a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;
  34.  
  35. <a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;
  36. <a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;
  37.  
  38. <a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;
  39. <a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;
  40. <a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;
  41.  
  42. <a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;
  43. <a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;
  44. <a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;
  45. <a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;
  46. <a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;
  47. <a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;
  48.  
  49. <a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;
  50. <a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;
  51.  
  52. <a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;
  53.  
  54. <a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;
  55.  
  56. <input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones">
  57.  
  58. </form>
  59.  
  60.  
  61. <hr>
  62. </div>
  63.  
  64.  
  65. <div id="contenedor">
  66. 	<center>
  67.  
  68. 		<div id="cabecera">
  69.  
  70. 			<div id="logo">
  71.  
  72. 			<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
  73.  
  74. 			</div>
  75.  
  76. 			<div id="anexo">
  77.  
  78. 			<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar &#9660;)</a>			
  79.  
  80. 			</div>
  81.  
  82. 		</div>
  83.  
  84. <!-- Menu navegador -->
  85.  
  86. 		<div id="navegador">
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93. 		</div>
  94.  
  95. <!-- El contenido central -->
  96.  
  97. 	<div id="contenido">
  98.  
  99. 		<h1 class="naranja">Inicie Sesión</h1>
  100.  
  101. 		<form action="login.php" method="post" name="form1">
  102.  
  103. 		<label for="usuario">Usuario:</label>
  104. 		<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
  105. 		&nbsp;&nbsp;&nbsp;
  106. 		<label for="contrasena">Contraseña:</label>
  107. 		<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>
  108.  
  109.  
  110.  
  111. 		<input type="button" class="tv_sim" value="1">
  112. 		<input type="button" class="tv_sim" value="2">
  113. 		<input type="button" class="tv_sim" value="3">
  114. 		<input type="button" class="tv_sim" value="4">
  115. 		<input type="button" class="tv_sim" value="5">
  116. 		<input type="button" class="tv_sim" value="6">
  117. 		<input type="button" class="tv_sim" value="7">
  118. 		<input type="button" class="tv_sim" value="8">
  119. 		<input type="button" class="tv_sim" value="9">
  120. 		<input type="button" class="tv_sim" value="0">
  121.  
  122. 		<input type="button" id="backspace" value="&#8592;">
  123. 		<br>
  124.  
  125. <!-- Cambia a mayusculas y minusculas -->
  126. 		<input type="button" id="caps" value="Bloq.Mayus">
  127. <!-- End -->
  128.  
  129. 		<input type="button" class="tv_let" value="q">
  130. 		<input type="button" class="tv_let" value="w">
  131. 		<input type="button" class="tv_let" value="e">
  132. 		<input type="button" class="tv_let" value="r">
  133. 		<input type="button" class="tv_let" value="t">
  134. 		<input type="button" class="tv_let" value="y">
  135. 		<input type="button" class="tv_let" value="u">
  136. 		<input type="button" class="tv_let" value="i">
  137. 		<input type="button" class="tv_let" value="o">
  138. 		<input type="button" class="tv_let" value="p">
  139. 		<br>
  140. 		<input type="button" class="tv_let" value="a">
  141. 		<input type="button" class="tv_let" value="s">
  142. 		<input type="button" class="tv_let" value="d">
  143. 		<input type="button" class="tv_let" value="f">
  144. 		<input type="button" class="tv_let" value="g">
  145. 		<input type="button" class="tv_let" value="h">
  146. 		<input type="button" class="tv_let" value="j">
  147. 		<input type="button" class="tv_let" value="k">
  148. 		<input type="button" class="tv_let" value="l">
  149. 		<input type="button" class="tv_let" value="ñ">
  150. 		<br>
  151. 		<input type="button" class="tv_let" value="z">
  152. 		<input type="button" class="tv_let" value="x">
  153. 		<input type="button" class="tv_let" value="c">
  154. 		<input type="button" class="tv_let" value="v">
  155. 		<input type="button" class="tv_let" value="b">
  156. 		<input type="button" class="tv_let" value="n">
  157. 		<input type="button" class="tv_let" value="m">
  158.  
  159. 		<input type="button" class="tv_sim" value="-">
  160. 		<input type="button" class="tv_sim" value="_">
  161. 		<input type="button" class="tv_sim" value="@">
  162. 		<input type="button" class="tv_sim" value="#">
  163.  
  164.  
  165. 		<br><br>
  166. 		<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
  167. 		&nbsp;&nbsp;&nbsp;		
  168. 		<input type="submit" class="boton" value="Iniciar sesión">
  169. 		</form>
  170. 	</div>
  171.  
  172. <!-- Pie Pagina -->	
  173.  
  174. 		<div id="pie">
  175.  
  176. 		<hr>
  177.  
  178. 		<div id="pie-izq">
  179.  
  180. 		<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
  181. 		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
  182. 		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
  183. 		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
  184. 		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
  185. 		<span class="pie-izq">Hora: </span>
  186.  
  187.  
  188. 		</div>
  189.  
  190. 		<div id="pie-der">
  191.  
  192. 		<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
  193.  
  194.  
  195. 		</div>
  196.  
  197. 	<br><br>	
  198.  
  199. 	</div>
  200.  
  201.  
  202. 	</center>
  203.  
  204. </div>
  205.  
  206. <script type="text/javascript" >
  207.  
  208. $(".tv_sim").button();
  209. $(".tv_let").button();
  210. $("#backspace").button();
  211. $("#caps").button();
  212. $(".boton").button();
  213. </script>
  214.  
  215. <script type="text/javascript" src="js/wysiwyg.js"></script>
  216.  
  217. </body>
  218. </html>
  219.  
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como hacer enviar un texto a un ftp
Programación Visual Basic 		rodimus 1 1,768 Último mensaje 23 Mayo 2005, 12:45 pm
por Ertai
Hacer CD con jpg, mp3, vídeos y texto para reproductor.
Multimedia 		helejagy 3 1,985 Último mensaje 12 Marzo 2006, 18:35 pm
por Songoku
Como hacer que guarde los archivos de texto en pipes en vez de comas?
Programación Visual Basic 		Onizuka 6 4,217 Último mensaje 26 Mayo 2006, 11:18 am
por SheKeL_C$
El panel para poner negrita, etc... como en el wordpress
Desarrollo Web 		dimitrix 3 4,301 Último mensaje 18 Agosto 2010, 11:33 am
por dimitrix
Editor de texto / negrita / cursiva / ...
Programación Visual Basic 		ltbl 2 14,220 Último mensaje 30 Octubre 2010, 11:44 am
por ltbl
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines