Editor Wysiwyng muy simple

Bugger · #1 (**permalink**) 24/09/2010, 08:28

hola, estoy buscando un pequeño editor que me permita solamente, capturar los saltos de linea y poder cambiar el tamaño de letra, es algo muy muy simple y no quiero complicarme la vida con pre-fabricados muy complejos que tienes millones de opciones cuando yo solo quiero dos.

sabes de alguno? o si seria facil 'relativamente' hacerlo?

maycolalvarez · #2 (**permalink**) 24/09/2010, 08:38

es difícil encontrar uno con pocas características, pero generalmente se pueden configurar para que muestre las básicas, uno de los que más me ha gustado es este, porque hace uso de jQuery: http://plugins.jquery.com/project/CLEditor suerte

Bugger · #3 (**permalink**) 24/09/2010, 09:02

Hola maycolalvarez,
gracias por tu respuesta tant rapida!

la verdad como que uso jquery este me irá bastante bien.

ahora bien, uso tambien el pluguin [URL="http://jquery.malsup.com/block/#demos"] blockUI[/URL], y no tengo manera de que me cargue el CLEDITOR.

aqui posteo el codigo:
-asi llamo a la pagina para abrir el blokui desde un link

Código Javascript:

Ver originalfunction fn_mostrar_mi_editor(){
        $("#div_ocult").load("mi_editor.php", function(){
            $.blockUI({
                message: $('#div_oculto'),
                css:{
                        top: '20%',
                        width:'55%',
                        left:'25%'
                }
            });
        });
    }

- esta seria la pagina q abro con blokui

Código HTML:

Ver original<script type="text/javascript">
  $(document).ready(function() {
    $("#input_editor").cleditor()[0].focus();
  });
</script>
<textarea id="input_editor" name="input_editor">This is the fixed size demo.</textarea>
<input name="cancelar" type="button" id="cancelar" value="Cancelar" onclick="fn_tancar();" />

alguna idea de porque no me carga?

PD: el css i el pluguin los cargo en la home!

Panino5001 · #4 (**permalink**) 24/09/2010, 09:03

Aquí algo muy sencillo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script> 
function formatText(cmd,v){ 
    document.execCommand(cmd, false, v); 
} 
</script> 
</head> 

<body> 
<form action="" method="get"><input name="input" type="button" onclick="formatText('fontSize',1)" value="1" /><input name="input" type="button" onclick="formatText('fontSize',2)" value="2" /><input name="input" type="button" onclick="formatText('fontSize',3)" value="3" />
</form> 
<div id="pp" contenteditable="true">Este es un texto editable</div> 
</body> 
</html>

Bugger · #5 (**permalink**) 24/09/2010, 09:18

Hola Panino5001,

ese sencillo ejemplo es brutal!!!

muchas grácias!!!!

Editado: es posible pasar el contenido de ese div por POST en un formulario aparte del que hay para cambiar de tamaño?

ejemplo:

Código HTML:

Ver original<form id="formattext" action="" method="get">
    Tamany
    <select onchange="formatText('fontSize',this.value)">
        <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>
    </select>
 
</form>
<form action="javascript: fn_guardar();" method="post" id="frm_guardar">
<table class="formulari">
    <tr>
        <td colspan="2">
            <div id="div_texte" contenteditable="true">Texte Demo</div>
        </td>
    </tr>
    <tr>
        <td><input name="guardar" type="submit" id="guardar" value="guardar" /></td>
        <td><input name="cancelar" type="button" id="cancelar" value="Cancelar" onclick="fn_tancar();" /></td>
    </tr>
</table>
</form>

y la funcion guardar seria:

Código Javascript:

Ver originalfunction fn_guardar(){
        var str = $("#frm_guardar").serialize(); --> asi no va
        var div_texte = $("#div_texte").innerHTML; --> asi tampoco
            $.ajax({
                url: 'guardar.php',
                data: div_texte,
                type: 'POST',
                success: function(data){
                    if(data!="")
                        alert(data);
                }
            });
    }

gumer · #6 (**permalink**) 25/09/2010, 05:27

Esta interesante el tema... como capturo ahora el texto del div... excelente maestro... ahora la sereza de la tarta;)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script> 
function formatText(cmd,v){ 
    document.execCommand(cmd, false, v); 
} 

function fnc000(){
  var msn = document.getElementById("pp").innerHTML;
  alert("HOLA: "+msn);
}
</script> 
</head> 

<body> 
<form action="" method="get"><input name="input" type="button" onclick="formatText('fontSize',1)" value="1" /><input name="input" type="button" onclick="formatText('fontSize',2)" value="2" /><input name="input" type="button" onclick="formatText('fontSize',3)" value="3" />
 
<div id="pp" contenteditable="true">Este es un texto editable</div>
<input type="button" name="alg" id="alg" value="enviar" onclick="fnc000()">
</form>
 
</body> 
</html>

Lo he probado, en iexplorer, mozilla y CHROME... funciona... me estan por salir lagrimas... no pedo crerlo... justo lo que necesitaba... SNIFT SNIFT....