Un editor de texto con javaScript (y 2)

Más cosas sobre un editor wyswyg con javaScript.

Lampika

archivado en: JavaScript / 23 agosto, 2014

En la entrada anterior vimos las claves para realizar un editor de texto wyswyg con javaScript, en esta veremos cómo añadir algunas funcionalidades útiles, como mostrar el código del editor en HTML. Y esto es muy fácil de hacer si recordamos que en los <textarea> el contenido es texto plano, es decir, que los tags no se interpretan, sino que se muestran como si fueran cualquier otra cadena. Así, basta con añadir un botón al toolbar que lance este modo de visualización:

<button id="js-viewHTML"><span class="glyphicon glyphicon-pencil"></span></button>

Y en el js preparar algo parecido a esto:

$('#js-viewHTML').click(function() {

var contenido, cadena;

if ( $(this).hasClass('vistaHTML') ) {

contenido = $('#editorHTML').val();

cadena = "<div id='editorWYS' contenteditable='true'>"+contenido+"</div>";

$('.js-botonesVisuales').show();

$('#editorHTML').replaceWith(cadena);

$(this).removeClass('vistaHTML');

} else {

contenido = $('#editorWYS').html();

cadena = "<textarea id='editorHTML'>"+contenido+"</textarea>";

$('.js-botonesVisuales').hide();

$('#editorWYS').replaceWith(cadena);

$(this).addClass('vistaHTML');

}

});

Corrector

Otra funcionalidad interesante es el corrector ortográfico, que es muy fácil de añadir con el atributo spellcheck, que con valor true hace que el navegador resalte las palabras mal escritas. Por supuesto, no funciona con el explorer hasta su versión 10, pero basta con remover este botón si el cliente aún usa esta tostadora. Para todos los demás, es tan sencillo como hacer un botonako tal que así:

<button id="js-spell"><span class="glyphicon glyphicon-ok"></span></button>

y luego activarlo o desactivarlo en el js:

$('#js-spell').click(function() {

if ( $(this).hasClass('activo') ) {

$(this).removeClass('activo');

$('#editorWYS').attr('spellcheck','false');

} else {

$('#editorWYS').attr('spellcheck','true');

$(this).addClass('activo');

}

});

No es que sea una maravilla, pero es previsible que los navegadores lo vayan mejorando.

ver en plunker

Guardar

Por último, vamos a ver cómo podemos guardar este pseudoformulario. Disponemos de varias opciones. Una algo chapucera sería copiar el contenido en un formulario de verdad con display none y luego hacer un submit() con jQuery, por ejemplo; pero la que me parece más elegante y más efectiva, sobre todo si hay más campos o cosas que tenemos que enviar, como una imagen, es utilizar el objeto FormData de XMLHttpRequest 2. Es tan sencillo como crear el objeto:

var formObject = new FormData();

ir añadiendo "campos" con append:

formObject.append("inputEditor",$('#editorWYS').html());

y enviarlo por ajax.

$.ajax({

type: "POST",

url: "dirección en la que recogemos el formulario",

cache: false,

contentType: false,

processData: false,

data: formData,

success: function(response, textStatus, jqXHR){

//

}).fail(function() {

//
},

error: function(jqXHR, textStatus, errorThrown){

//

}

});

(Ver explicación detallada en el blog de Sergio Fraile).

Bueno, de momento lo dejo aquí.

|| Tags: , ,

valoración de los lectores sobre Un editor de texto con javaScript (y 2)

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.