193 lines
6.8 KiB
HTML
193 lines
6.8 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
|
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
|
|
<head>
|
|
<title>wyiswyg - mootools</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
|
|
<script type="text/javascript" src="mootools-1.2-core.js"></script>
|
|
<script type="text/javascript" src="_uif.js"></script>
|
|
<script type="text/javascript" src="_class.wysiwyg.packed.js"></script>
|
|
<script type="text/javascript">//<![CDATA[
|
|
window.addEvent('domready',function(){
|
|
// Sample 1
|
|
var W1 = new wysiwyg({});
|
|
$('sample1').getElement('form').addEvent('submit',function(){
|
|
if(W1.open){
|
|
W1.toTextarea();
|
|
}
|
|
});
|
|
|
|
// Sample 2
|
|
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
|
|
var W3 = new wysiwyg({
|
|
textarea: $('sample3').getElement('textarea'),
|
|
src:'_wysiwyg.html'
|
|
});
|
|
|
|
var imgs = $('imgs');
|
|
imgs.getChildren().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);
|
|
};
|
|
});
|
|
//]]></script>
|
|
</head>
|
|
<body>
|
|
<div id="cont">
|
|
|
|
<h1>wysiwyg - mootools</h1>
|
|
|
|
<div class="description">
|
|
<p><strong>wysiwyg</strong>, plugin (clase) para <a href="http://mootools.net" title="a super lightweight web2.0 javascript framework">mootools 1.2</a>. Es un editor "<a href="http://es.wikipedia.org/wiki/WYSIWYG" title="What You See Is What You Get">wysiwyg</a>" básico para web, con soporte para salida en xhtml.</p>
|
|
<p>_class.wysiwyg.packed.js (3.88kb)</p>
|
|
<h4>Descargar:</h4>
|
|
<p>
|
|
- <a href="class.wysiwyg.js.zip">wysiwyg (rev.06-07-08)</a> <br />
|
|
- <a href="CHANGELOG">changelog</a>
|
|
</p>
|
|
<h4>Relacionado:</h4>
|
|
<p>
|
|
- iValidator<br />
|
|
- <a href="../" title="Mootools Plugins">mootools plugins</a>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<!-- SAMPLE 1 -->
|
|
<h2>Sample 1</h2>
|
|
<div class="description">
|
|
<p>Opciones por defecto. Sin no se le pasa el parámetro <code>textarea</code>, tomará el primero que encuentre.</p>
|
|
<p>Tenemos que modificar el evento <code>submit</code> del formulario al que pertence el textarea, para actualizar su valor antes de enviarlo. Si la propiedad W1.<code>open</code> es <code>true</code> indica que estamos en modo iframe, si es <code>false</code>, en modo de textarea.</p>
|
|
<pre>
|
|
var W1 = new wysiwyg({});
|
|
$('sample1').getElement('form').addEvent('submit',function(){
|
|
if(W1.open){
|
|
W1.toTextarea();
|
|
}
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="sample" id="sample1">
|
|
<form action="form_processor.php" method="post">
|
|
<div>
|
|
<textarea name="contenido" rows="5" cols="30"><p>Contenido inicial.</p></textarea>
|
|
</div>
|
|
<p class="buttons"><input type="submit" /></p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- SAMPLE 2 -->
|
|
<h2>Sample 2</h2>
|
|
<div class="description">
|
|
<p>En este ejemplo le pasamos el parámetro textarea ( <code>textarea: $('sample2').getElement('textarea')</code>) , la lista de bottones ( <code>buttons: ['strong','em','u','superscript','subscript',null,'ul','ol']</code> ) y la ruta para el iframe ( <code>src:'_wysiwyg.html'</code> ), que es donde se carga los estilos para el editor.</p>
|
|
<p>Esta vez lo enviamos por ajax.</p>
|
|
<pre>
|
|
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});
|
|
});
|
|
</pre>
|
|
</div>
|
|
<div class="sample" id="sample2">
|
|
<div>
|
|
<textarea name="contenido" rows="5" cols="30"><p>Contenido inicial.</p></textarea>
|
|
</div>
|
|
<p class="buttons"><input type="button" value="Enviar con ajax" /></p>
|
|
</div>
|
|
|
|
<!-- SAMPLE 3 -->
|
|
<h2>Sample 3</h2>
|
|
<div class="description">
|
|
<p>Le asignamos los parámetros <code>textarea</code> y <code>src</code>.</p>
|
|
<p>Modificamos el evento <code>click</code> de las imágenes inferiores para que se agreguen al editor.</p>
|
|
<p>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 <code>exec</code>: ( <code>W3.exec('img',image);</code> ), donde <code>image</code> es la ruta de la imagen.</p>
|
|
<pre>
|
|
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);
|
|
};
|
|
</pre>
|
|
</div>
|
|
<div class="sample" id="sample3">
|
|
|
|
<div>
|
|
<textarea name="contenido" rows="5" cols="30"><p>Has click sobre las imágenes inferiores o sube una desde tu disco duro.</p></textarea>
|
|
</div>
|
|
|
|
<div id="imgs">
|
|
<img src="img/img1.jpg" alt="Image" />
|
|
<img src="img/img2.jpg" alt="Image" />
|
|
<img src="img/img3.jpg" alt="Image" />
|
|
<img src="img/img4.jpg" alt="Image" />
|
|
<img src="img/img5.jpg" alt="Image" />
|
|
</div>
|
|
|
|
<form action="foto_upload.php" method="post" enctype="multipart/form-data">
|
|
<div><input type="file" name="file" id="fileInput"/> <input type="submit" value="Cargar foto" /></div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |