elrte – Editor de texto WYSIWYG para tus aplicaciones web

Os damos a conocer uno de los editores de texto mas completos que existen para tus aplicaciones web, elrte.

Cómo se utiliza ?

Primero hay que descargar la librería en la web oficial de elrte: ceforge.net/projects/elrte/files/

Después, tener en cuenta que necesita jQuery y jQuery UI.

Vamos a por el código:

Código a poner en el head de la página

1
2
3
4
5
6
7
8
9
/* Hojas de estilo */
<link rel="stylesheet" href="http://www.miweb.com/admin/js/elrte/css/elrte.min.css" type="text/css" media="screen" />
 
/* Las librerías necesarias */
<script type="text/javascript" src="http://www.miweb.com/admin/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.miweb.com/admin/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="http://www.miweb.com/admin/js/elrte/js/elrte.min.js"></script>
<script type="text/javascript" src="http://www.miweb.com/admin/js/elrte/js/i18n/elrte.es.js"></script>
</script>

Fijaos que llamamos la libreia de jQuery, la jQuery UI, la elrte y por último el fichero del lenguaje que necesitamos el editor.

El textarea que convertiremos en editor

2
<textarea id="contenido" name="contenido"></textarea>

El código jQuery para la conversión

3
4
5
6
7
8
9
10
11
12
$(function() {
//Editor
var opts = {
	lang         	: 'es',   // Poner lenguage
	width		: 790,
	height       	: 250,
	toolbar      	: 'normal'
}
$('#contenido').elrte(opts);
});

En la última línea de código indicamos que debemos convertir en editor el objeto con Id ‘contenido’. En nuestro caso, el textarea.

Si visitáis la página web del proyecto, podéis ver todas la opciones del editor. En el ejemplo las opciones indican el lenguaje, el ancho, el largo y que tipo de barra principal tendrá.

Más información

Artículos relacionados

FancyBox – Llamarlo desde una función Muchos de vosotros conoceréis FancyBox, una alternativa para Ligtht Box. Nos permite abrir ventanas modales mostrando mensajes o imágenes. Las maneras...
Comprobar enlaces rotos El tener una página web con todos los enlaces correctos es mas importante de lo que se cree. De ello depende en gran medida que buscadores como Google...
jQuery – Seleccionar opción de un desplegabl... Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les fu...
jQuery – Validar formulario antes de enviarl... Os dejamos un videotutorial que detalla cómo validar un formulario antes de enviarlo, mostrando al usuario qué error está cometiendo y en que campo. V...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*