Autor
|
Tema: como poner un color a mi wysiwyg (Leído 3,406 veces)
|
tecasoft
Desconectado
Mensajes: 319
Ciberseguridad tecasoft.com
|
estoy haciendo un wysiwyg y necesito que me funcione el color a la hora de seleccionar el color me vaya a cambiar el color de la letra, ya esta el ContentEditable=true asi que puedo modificar la pagina, os paso un cacho del codigo, gracias: <form name="form_color"> <td id="color"><input type="text" name="color" value="#000000" class="color"><td> </form>
$('#color').click(function(){ var color = document.form_color.color.value; //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; });
|
|
|
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
Mensajes: 319
Ciberseguridad tecasoft.com
|
alguien sabe como poner color aun texto es que el comentario anterior no me funciona: editor.php<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">
<script type="text/javascript" src="js/jquery.colorPicker.js"></script>
<link rel="stylesheet" href="css/colorPicker.css" type="text/css">
</head> <body>
<div id="editor_contenido">
<table> <tr>
<td><a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a> </td>
<form>
<td><input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar"> </td>
</form>
<form action="editor_vista_previa.php" method="post" target="_blank" name="form_editor">
<td><input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa"> </td>
<input type="hidden" name="texto">
</form>
<td><a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a> </td> <td><a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a> </td> <td><a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a> </td> <td><a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a> </td>
<td><img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion"> </td>
<form name="form_color"> <td id="color"><input type="text" name="color" value="#000000" class="color"><td> </form>
<td><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> </td> <td><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> </td>
<td><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> </td> <td><a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a> </td> <td><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> </td>
<td><a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a> </td> <td><a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a> </td> <td><a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a> </td> <td><a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a> </td> <td><a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a> </td> <td><a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a> </td>
<td><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> </td> <td><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> </td>
<td><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> </td>
<td><a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a> </td>
<form>
<td><input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones"></td>
</form>
</tr> </table>
<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"> <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"> <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> <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 | </a> <a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos | </a> <a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte | </a> <a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web | </a> <span class="pie-izq">Rotacion soporte: | </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>
<!-- Empieza el wysiwyg --> <script type="text/javascript" src="js/wysiwyg.js"></script>
<script type="text/javascript" > $(function() { $('.color').colorPicker(); }); </script>
</body> </html>
// by Sergio
// 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 = document.form_color.color.value; //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"); document.form_editor.texto.value = theForm2 = document.getElementById('contenedor').innerHTML;
form_editor.submit();
}); //
// by Sergio
|
|
|
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
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
quiero poner un fondo de imagen photoshop con un color hexadecimal
Diseño Gráfico
|
alzehimer_cerebral
|
3
|
7,876
|
8 Octubre 2009, 01:03 am
por Azielito
|
|
|
[Sugerencia] Poner los hipervinculos y links de otro color
« 1 2 3 4 5 »
Sugerencias y dudas sobre el Foro
|
Aikanáro Anário
|
42
|
19,322
|
3 Febrero 2010, 21:44 pm
por ....
|
|
|
[WYSIWYG]NicEdit, ¿como se hace para pasar el texto formateado en html por POST?
Desarrollo Web
|
astinx
|
2
|
5,988
|
30 Diciembre 2011, 01:14 am
por astinx
|
|
|
Ayuda Vbscript .Como poner color a una ventana (consola cscript)
Scripting
|
.:: KsV ::.
|
1
|
3,677
|
24 Junio 2015, 11:14 am
por Eleкtro
|
|
|
Editor wysiwyg para mi web
Desarrollo Web
|
yoelrodguez
|
3
|
5,144
|
8 Agosto 2022, 19:04 pm
por yoelrodguez
|
|