pequeño deditor de txt

[X3mdesign]

Hola foro!!!

a ver si me podéis ayudar con esto

En mi web puedo modificar todas las tablas de mi BD para añadir noticias, temas de cultura, gastronomía, etc. pero es un coñ*zo el tenes que meter a mano las etiquetas de HTML para formatearlo, tampoco me recoge los retornos de carro teniendo que poner <br><br> o <p></p> para que aparezca así en la web.

Hay algun tutorial o alguna web que "preste" el código para poder hacer el editor??

Muchas gracias!!!!

[josemi]

Hola,

Para los saltos de linea, mira esta FAQ: http://www.forosdelweb.com/showthrea...770#post245770

Y sobre un editor WYSIWYG (editor visual), pues no se hace con PHP, sino con Javascript o flash (tecnologias del lado del cliente), asi que mejor busca en esos foros (en javascript ya se ha tratado varias veces).

Saludos.

[X3mdesign]

gracias!!! voy a ver qué encuentro ;)

[txarly]

Un editor WYSIWYG muy bueno hecho con HTML y Javascript lo puedes encontrar aquí

htmlarea

Un saludo
Txarly

[epplestun]

En la pagina www.mozilla.org tienes la API para hacer un editor haciendo uso de JS. Yo tengo hecho uno con esa API y me funciona perfectamente.

[epplestun]

Aqui te dejo la parte de js, es una API muy sencilla.

Código PHP:

  <script language="JavaScript">
    /*
       +----------------------------------------------------------------------+
       | DikodeRTE v.0.0.1                                                    |
       +----------------------------------------------------------------------+
       | Copyright (c) 2001-2003 DIkode                                       |
       +----------------------------------------------------------------------+
       | This source file is subject to version 2.02 of the PHP license,      |
       | that is bundled with this package in the file LICENSE, and is        |
       | available at through the world-wide-web at                           |
       | php.net/license/2_02.txt.                                 |
       | If you did not receive a copy of the PHP license and are unable to   |
       | obtain it through the world-wide-web, please send a note to          |
       | [email][email protected][/email] so we can mail you a copy immediately.               |
       +----------------------------------------------------------------------+
       | Authors: Ivan Rodriguez Espada   <[email protected]>              |
       +----------------------------------------------------------------------+
    */
    /*
     * Inicializa el editor
     */
    function start() {
        document.getElementById('edit').contentWindow.document.designMode = "on";
    }
    
    /*
     * Indica el estilo que queremos dar a nuestra letra
     */
    function estilo(estilo) { 
        switch(estilo) {
            case "Bold":
                document.getElementById('edit').contentWindow.document.execCommand("Bold", false, null);
                break;
            case "Italic":
                document.getElementById('edit').contentWindow.document.execCommand("Italic", false, null);
                break;
            case "Underline":
                document.getElementById('edit').contentWindow.document.execCommand("Underline", false, null);
                break;
            case "Superscript":
                document.getElementById('edit').contentWindow.document.execCommand("Superscript", false, null);
                break;
            case "Subscript":
                document.getElementById('edit').contentWindow.document.execCommand("Subscript", false, null);
                break;
            case "Strikethrough":
                document.getElementById('edit').contentWindow.document.execCommand("Strikethrough", false, null);
                break;
            default: break;
        }
        document.getElementById('edit').contentWindow.focus();
    }
    
    /*
     * Genera una ventana Modal
     */
    function VentanaMod(url, ancho, alto) {
        var anchoVentana = ancho;
        var altoVentana  = alto;
        var izquierda = ((screen.width-anchoVentana)/2);
        var arriba    = ((screen.height-altoVentana)/2);
        window.open(url, 'Enlace', 'width='+anchoVentana+',height='+altoVentana+ ',left=' + izquierda + ',top=' + arriba);
    }    
 
    /*
     * Alinea el documento
     */
    function alinear(opcion) {
        switch(opcion) {
            case "Justifycenter":
                document.getElementById('edit').contentWindow.document.execCommand("Justifycenter", false, null);
                break;
            case "Justifyfull":
                document.getElementById('edit').contentWindow.document.execCommand("Justifyfull", false, null);
                break;
            case "Justifyleft":
                document.getElementById('edit').contentWindow.document.execCommand("Justifyleft", false, null);
                break;
            case "Justifyright":
                document.getElementById('edit').contentWindow.document.execCommand("Justifyright", false, null);
                break;
            default: break;
        }
        document.getElementById('edit').contentWindow.focus();
    }
    
    /*
     * Funciones de edicion
     */
    function edicion(estilo) { 
        switch(estilo) {
            case "Paste":
                document.getElementById('edit').contentWindow.document.execCommand("Paste", false, null);
                break;
            case "Copy":
                document.getElementById('edit').contentWindow.document.execCommand("Copy", false, null);
                break;
            case "Cut":
                document.getElementById('edit').contentWindow.document.execCommand("Cut", false, null);
                break;
            case "Undo":
                document.getElementById('edit').contentWindow.document.execCommand("Undo", false, null);
                break;
            case "Redo":
                document.getElementById('edit').contentWindow.document.execCommand("Redo", false, null);
                break;
            default: break;
        }
        document.getElementById('edit').contentWindow.focus();
    }
    
    /*
     * Funciones de listas
     */
    function listas(estilo) { 
        switch(estilo) {
            case "Insertorderedlist":
                document.getElementById('edit').contentWindow.document.execCommand("Insertorderedlist", false, null);
                break;
            case "Insertunorderedlist":
                document.getElementById('edit').contentWindow.document.execCommand("Insertunorderedlist", false, null);
                break;
            default: break;
        }
        document.getElementById('edit').contentWindow.focus();
    }    
    
    /*
     * Funciones de margen
     */
    function margen(estilo) { 
        switch(estilo) {
            case "Outdent":
                document.getElementById('edit').contentWindow.document.execCommand("Outdent", false, null);
                break;
            case "Indent":
                document.getElementById('edit').contentWindow.document.execCommand("Indent", false, null);
                break;
            default: break;
        }
        document.getElementById('edit').contentWindow.focus();
    }
 
    /*
     * Funciones de estilo de fuente
     */    
    function select(selectname)    {
        var cursel = document.getElementById(selectname).selectedIndex;
        if (cursel != 0) {
            var selected = document.getElementById(selectname).options[cursel].value;
            document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
            document.getElementById(selectname).selectedIndex = 0;
        }
        document.getElementById('edit').contentWindow.focus();
    }
    
    /*
     * Inserta una linea horizontal
     */
    function linea() {
        document.getElementById('edit').contentWindow.document.execCommand("Inserthorizontalrule", false, null);
        document.getElementById('edit').contentWindow.focus();
    }
    
    function codigo() {
        var html = document.getElementById('edit').contentWindow.document.body.innerHTML;
        document.enlace.HTML.value = html;
    }
    </script> 
  

Eso seria el JS.

Luego tan solo tienes que añadir un iframe de esta manera:

Código:

<body onLoad="start()">
<iframe id="edit" width="100%" height="400px"  frameborder="1"></iframe>
</body>

Ummmmmm cuando acabe de trabajar monto el editor y lo cuelgo por ahi con el code explicado a ve si os sirve de algo

Saludillos!!!

[X3mdesign]

sin palabras me dejas epplestun, pero... entonces el JS lo tengo que poner en mi documento, no?? donde se introducen los textos... y en el mismo lugar el iframe que comentas... no?? y los botones para pinchar y que se modifique el texto??


muchas gracias de nuevo !!!!

[epplestun]

Bueno, a ve la API la tienes, tan solo tienes que hacer los botones llamando a las funciones de JS, aqui te dejo un ejemplo:

Código:

<table width="100%" cellpadding="2" cellspacing="2" border="0">
					<tr>
						<td>
						<select id="formatblock" onchange="select(this.id);" style="font-size:10; font-family:verdana">
		  					<option value="<p>">Normal</option>
		  					<option value="<p>">Paragraph</option>
		 					<option value="<h1>">Heading 1 <H1></option>
							<option value="<h2>">Heading 2 <H2></option>
		  					<option value="<h3>">Heading 3 <H3></option>
		  					<option value="<h4>">Heading 4 <H4></option>
		  					<option value="<h5>">Heading 5 <H5></option>
		 					<option value="<h6>">Heading 6 <H6></option>
		  					<option value="<address>">Address <ADDR></option>
		  					<option value="<pre>">Formatted <PRE></option>
						</select>
						</td>
						<td>
						<select id="fontname" onchange="select(this.id);" style="font-size:10; font-family:verdana">
							<option value="Font">Font</option>
							<option value="Arial">Arial</option>
							<option value="Courier">Courier</option>
							<option value="Verdana">Verdana</option>
						</select>
						</td>
						<td>
						<select unselectable="on" id="fontsize" onchange="select(this.id);" style="font-size:10; font-family:verdana">
							<option value="Size">Size</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>  
						</select>
						</td>
						<td width="20"><a href=# onclick="estilo('Bold')"><img src="imagenes/bold.png" border="0"></a></td>
						<td width="20"><a href=# onclick="estilo('Italic')"><img src="imagenes/italic.png" border="0" ></a></td>
						<td width="20"><a href=# onclick="estilo('Underline')"><img src="imagenes/underline.png" border="0"></a></td>
						<td width="20"><a href=# onclick="alinear('Justifyleft')"><img src="imagenes/justifyleft.png" border="0"></a></td>
						<td width="20"><a href=# onclick="alinear('Justifycenter')"><img src="imagenes/justifycenter.png" border="0"></a></td>
						<td width="20"><a href=# onclick="alinear('Justifyright')"><img src="imagenes/justifyright.png" border="0"></a></td>
						<td width="20"><a href=# onclick="listas('Insertorderedlist')"><img src="imagenes/number.png" border="0"></a></td>
						<td width="20"><a href=# onclick="listas('Insertunorderedlist')"><img src="imagenes/list.png" border="0"></a></td>
						<td width="20"><a href=# onclick="margen('Outdent')"><img src="imagenes/outdent.png" border="0"></a></td>
						<td width="20"><a href=# onclick="margen('Indent')"><img src="imagenes/indent.png" border="0"></a></td>
						<td width="20"><a href=# onclick="linea()"><img src="imagenes/rule.png" border="0"></a></td>
					</tr>
					<tr>
						<td colspan="16">
						<iframe id="edit" width="100%" height="400px"  frameborder="1"></iframe>
						</td>
					</tr>
					<tr>
						<td colspan="16" align="center"><input type="submit" value="Bidali" class="formulario"></td>
					</tr>
					</table>

Con ese code tienes para insertar cualquier cosa, solo faltaria el tema de los enlaces y de las imagenes que es igual de sencillo lo unico que antes no lo puse, cuando llege a casa te lo monto para que veas como funciona

[josemi]

Bueno, creo que este mensaje ya merece ser movido al foro de javascript.

Saludos desde PHP.

[X3mdesign]

perdona de nuevo, epplestun, pero cómo se usa el API?? es como un include()??? te refieres a eso?? no estoy tan familiarizado con esto.... sorry :-$

[epplestun]

Primero, pedir disculpas, no me fije que el post estaba en el foro de PHP perdona josemi.

Bien, tan solo tienes que copiar el codigo JS con todo como te lo puse y listo, es decir, metes el code js en el html.

Código PHP:

  <html>
<head>
<!--aki pones el code-->
<script language="JavaScript">
//aki el resto de code usea toda la API
</script>
</head>
<body>
</body>
</html> 
  

Como puedes ver solo se trata de eso, es mu sencillo.

[X3mdesign]

Hola Epplestum de nuevo, he retomado el post... y me da un error en el código... he subido el html creado a http://nippon-tour.webcindario.com/error.htm pero... me doy por vencido... porque es un lío... si no te importa me gustaría mandarte el php a un mail para que le echaras un vistazo...

gracias de nuevo!!!!

P.D.: sabes que no estás obligado a nada