wysiwyg - mootools

wysiwyg, plugin (clase) para mootools 1.2. Es un editor "wysiwyg" básico para web, con soporte para salida en xhtml.

_class.wysiwyg.packed.js (3.88kb)

Descargar:

- wysiwyg (rev.2011-05-12)
- changelog

Relacionado:

- iValidator
- mootools plugins

Sample 1

Opciones por defecto. Sin no se le pasa el parámetro textarea, tomará el primero que encuentre.

Tenemos que modificar el evento submit del formulario al que pertence el textarea, para actualizar su valor antes de enviarlo. Si la propiedad W1.open es true indica que estamos en modo iframe, si es false, en modo de textarea.

var W1 = new wysiwyg({});
$('sample1').getElement('form').addEvent('submit',function(){
	if(W1.open){
		W1.toTextarea();
	}
});

Sample 2

En este ejemplo le pasamos el parámetro textarea ( textarea: $('sample2').getElement('textarea')) , la lista de bottones ( buttons: ['strong','em','u','superscript','subscript',null,'ul','ol'] ) y la ruta para el iframe ( src:'_wysiwyg.html' ), que es donde se carga los estilos para el editor.

Esta vez lo enviamos por ajax.

var W2 = new wysiwyg({
	textarea: $('sample2').getElement('textarea'),
	buttons: ['strong','em','u','superscript','subscript',null,'ul','ol'],
	src:'_wysiwyg.html'
});
var request2 = new Request({url:'form_processor.php',onComplete:function(r){alert(r);}});
$('sample2').getElement('input').addEvent('click',function(){
	if(W2.open){
		W2.toTextarea();
	}
	request2.send({data:'contenido='+W2.TA.value});
});

Sample 3

Le asignamos los parámetros textarea y src.

Modificamos el evento click de las imágenes inferiores para que se agreguen al editor.

Hacemos que el formulario se envíe internamente en un iframe, y el texto de respuesta (que es el nombre del archivo de la imagen) lo agregamos a la lista de las imágenes inferiores a la vez que se agregue al editor mediante el método exec: ( W3.exec('img',image); ), donde image es la ruta de la imagen.

var W3 = new wysiwyg({
	textarea: $('sample3').getElement('textarea'),
	src:'_wysiwyg.html'
});

var imgs = $('imgs');
imgs.getElements('img').each(function(el){el.addEvent('click',W3.exec.pass(['img',el.src], W3));});

var form = $('sample3').getElement('form').addEvent('submit',function(){
	if(!form.getElement('input').value.test(/\.jpg$/i)){
		alert('Debe seleccionar archivo tipo JPG.');
		return false;
	}
	UIF.send(form,'uploader',onUploadImage);
});

var onUploadImage = function(response){
	var	image = 'img/'+response;
	new Element('input',{'type':'file','name':'file'}).replaces(form.getElement('input'));

	new Element('img',{'src':image}).addEvent('click',W3.exec.pass(['img',image], W3)).injectTop(imgs);
	imgs.scrollTo(0,0);

	W3.exec('img',image);
};
Image Image Image Image Image