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

jQuery como seleccionar una opción de Select Código muy práctico para utilizarlo una vez recibimos datos vía AJAX y debemos seleccionar una de las opciones: Tarragona Albacete Castellón A...
Frameworks HTML5 Open Source para crear app/webs m... Listado de algunos Frameworks HTML5 Open Source por si os planteáis crear aplicaciones para móvil: Bootstrap Kendeo UI TopCoat Intel's App...
FancyBox como alternativa a LightBox La mayoría de vosotros ya conocerá LightBox como una de las librerías JavaScript mas famosas para crear atractivas galerías de fotos con sus respectiv...
jQuery – Conseguir el texto de la opción sel... En un desplegable, nos puede interesar saber el texto que se muestra de la opción seleccionada. Lo veremos mucho mejor con un ejemplo que puede aclara...

Deja un comentario

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

*