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

Información relacionada

Deja un comentario

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

*