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

Metaetiqueta para que navegador detecte canal de n... Para que el navegador detecte que nuestra web o blog tiene un canal de noticias RSS, debemos añadir la siguiente metaetiqueta: De esta mane...
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...
jQuery – Drag & Drop – 2 plugins Os dejo dos plugins que os puede ser de ayuda para el tratamiento del arrastre (drag & drop) de objetos: Draggabilly Permite arrastra solo en de...
Socialite.js – Botones sociales en su web Una pequeña librería JavaScript que permite poner los botones sociales de Facebook, Twitter, Google y LinkedIn de forma fácil en cualquier web o blog....

Deja un comentario

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

*