editor wyswyg – plugin jQuery

Un plugin para añadir un editor wyswyg a un textarea (en trabajo)

Flora Borsi,

archivado en: JavaScript / 4 enero, 2015

Hace unos meses necesitaba un editor wyswyg muy sencillo que funcionara en dispositivos móviles; pasada la faena le añadí unas cuantas funcionalidades más para investigar unas cosas y al final decidí convertirlo en un plugin de jQuery. (ver demo en github.io).

Aún le faltan varias cosas para estar listo, pero si alguien quiere colaborar con el proyecto o forkearlo, el código está en git.

Las cosas más importantes que faltan por hacer son:

  • Preparar algo que solucione un comportamiento raruno del salto de línea en un content-editable el chrome, ya que genera divs en vez de br.
  • Añadir un botón para hacer tablas.
  • Añadir un botón para aumentar y disminuir el tamaño del texto.
  • Añadir un botón para el código (ver cómo quedaría combinado con prism).
  • Testarlo 😛
  • Traducir las instrucciones al inglés.
  • Añadir idiomas.
  • Prepararlo como un módulo de angular

Quick use

1). Descargar y enlazar los archivos: mmfilesi-wyswyg.min.js y mmfilesi-wyswyg.min.css.

<link rel="stylesheet" type="text/css" href="css/mmfilesi-wyswyg.min.css">

<script src="js/vendor/jquery.min.js"></script>

<!--Poner el js después de cargar el jQuery -->

<script src="js/mmfilesi-wyswyg.min.js.js"></script>

Además, hay que descargarse completas las carpetas fonts e icons.

(Pendiente: preparar todo el pack y bowearlo).

2). En el html poner un textarea con un div.

<textarea id="foo"></textarea>

3). En el js, instanciar el editor pasándole el id del textarea.

$(document).ready(function() {

$('#foo').editorMM();

});

Opciones

Se pueden definir algunas opciones en un json.

var options = {};

options.style = { 'width': '475px' };

$('#foo').editorMM();

De momento, estas opciones son:

a) Estilos

style: {

'width': '800px', // Ancho

'height': '100%' // Alto

}

b) Botones (en un array)

buttons: [ 'colors', 'colors-bk', 'sep', 'bold', 'italic', 'underline', 'strikeThrough', 'smallCaps', 'subscript', 'superscript', 'header', 'sep', 'insertUnorderedList', 'insertOrderedList', 'sep', 'code', 'br', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'sep', 'link', 'unlink', 'sep', 'img', 'filmstrip', 'sep', 'smile', 'sep', 'undo', 'redo', 'removeFormat']

(sep sirve para poner una separación de una línea y br para el salto de línea).

Por ejemplo:

var options = {};

options.style = { 'width': '475px' };

options.buttons = [ 'colors', 'colors-bk', 'sep', 'bold', 'italic'];

$('#foo').editorMM(options);

Licencia

Se puede usar en cualquier sitio, tenga o no fines comerciales, se puede cambiar el código... vamos, haz lo que te apetezca.

La única restricción es con el botón de los emoticonos, que no son míos, sino de Bad Blood (Anassi mehdi) y solo los tiene liberados para sitios no comerciales, así que si necesitas ese botón y tu sitio es de pago, reemplaza los que hay por otros.

Bueno, en cuanto saque tiempo preparo unas instrucciones más claras...

|| Tags: ,

valoración de los lectores sobre editor wyswyg – plugin jQuery

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 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.