Foros del Web - Ver Mensaje Individual

Panino5001 · #7 (**permalink**) 16/03/2009, 12:59

En ese caso es sencillo. Reemplazá, el archivo source.js por este:

Código:

/**
 *
 * Editor WYSIWYG
 *
 * Este script convertira todos tus textareas en
 * editores WYSIWYG (What You See Is What You Get)
 * Un editor WYSIWYG permite al usuario escribir
 * textos con estilos de una manera practica y sencilla.
 * Funciona tanto en IE como en FireFox
 *
 * Este script ha sido desarrollado integramente
 * por Ivn Arias ([email protected])
 *
 * Vista www.php-hispano.net y #php_para_torpes (iRC-Hispano)
 *
 */

var isIE = navigator.userAgent.indexOf('MSIE') >= 0;
var textarea = null;
addEvent(window, "load", init);

function addEvent(object, event, handler) {
 if (isIE)
    object.attachEvent("on" + event, handler);
  else
    object.addEventListener(event, handler, false)
}

function init() {
  var elements = document.getElementsByTagName('textarea');
  for (var i=0; i<elements.length; i++)
    makeWysiwyg(elements[i]);
}

function makeWysiwyg (element) {
  textarea = element;
  var edit = element.id+'_edit';

  html = '\
    <div style="border: 1px solid #CCC;">\
    <div style="border-top: 1px solid #CCC; background-color: #F0F0EE; padding: 0px;" align="center">\
    '+addImage("bold.gif", edit, "bold", "Negrita")+'\
    '+addImage("italic.gif", edit, "italic", "Cursiva")+'\
    '+addImage("underline.gif", edit, "underline", "Subrayado")+'\
    '+addImage("strikethrough.gif", edit, "strikethrough", "Tachado")+'\
    '+addSeparator()+'\
    '+addImage("link.gif", edit, "createlink", "Insertar enlace")+'\
    '+addImage("unlink.gif", edit, "unlink", "Quitar enlace")+'\
    '+addImage("image.gif", edit, "insertimage", "Aadir imagen")+'\
    '+addSeparator()+'\
    '+addImage("bullist.gif", edit, "insertunorderedlist", "Lista sin ordenar")+'\
    '+addImage("numlist.gif", edit, "insertorderedlist", "Lista sin ordenar")+'\
    <br>\
    '+addImage("undo.gif", edit, "undo", "Deshacer")+'\
    '+addImage("redo.gif", edit, "redo", "Rehacer")+'\
    '+addSeparator()+'\
    '+addImage("left.gif", edit, "justifyleft", "Alinear a la izquierda")+'\
    '+addImage("center.gif", edit, "justifycenter", "Alinear al centro")+'\
    '+addImage("right.gif", edit, "justifyright", "Alinear a la derecha")+'\
    '+addImage("full.gif", edit, "justifyfull", "Alinear justificado")+'\
    '+addSeparator()+'\
    '+addImage("outdent.gif", edit, "outdent", "Disminuir sangria")+'\
    '+addImage("indent.gif", edit, "indent", "Aumentar sangria")+'\
    </div>\
	<span id="'+edit+'">IFRAME</span>\
    </div>';

  if (isIE)
    element.insertAdjacentHTML("beforeBegin", html);
  else {
    var rng = element.ownerDocument.createRange();
    rng.setStartBefore(element);
    element.parentNode.insertBefore(rng.createContextualFragment(html), element);
  }

  element.style.display = 'none';

  var span = document.getElementById(edit);
  var iframe = document.createElement("iframe");
  iframe.id = edit;
  iframe.border = iframe.frameBorder = iframe.marginWidth = iframe.marginHeight = iframe.leftMargin = iframe.topMargin = "0";

  if (isIE) {
    iframe.src = "WYSIWYG/blank.html";
    span.outerHTML = iframe.outerHTML;
  } else {
    span.parentNode.replaceChild(iframe, span);
    var doc = getDocument(iframe);
    doc.designMode = "on";
    doc.open();
    doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'
             +'<html>'
             +'<head>'
             +'<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'
             +'</head>'
             +'<body style="padding: 0; margin: 0; spacing: 0; word-wrap: break-word;">'
             +element.value
             +'</body>'
             +'</html>');
    doc.close();
  }

  if (element.form != null)
    addEvent(element.form, "submit", setTextareaContent);
}

function setTextareaContent(event) {
  var source = isIE ? event.srcElement : event.target;
  var textareas = source.getElementsByTagName('textarea');
  for (var i=0; i<textareas.length; i++) {
    textareas[i].value = getDocument(document.getElementById(textareas[i].id+"_edit")).body.innerHTML;
  }
  return false;
}

function addImage(src, editor, command, coment) {
  return '<img src="WYSIWYG/images/'+src+'" onmouseover="seleccionar(this, \'#B6BDD2\');" onmouseout="desseleccionar(this);" onmousedown="seleccionar(this, \'#8592B5\');" onclick="executeCommand(\''+editor+'\', \''+command+'\'); desseleccionar(this);" style="border: 1px solid #F0F0EE; width; 2px; height: 20px;" alt="'+coment+'" title="'+coment+'">';
}

function addSeparator() {
  return '<img src="WYSIWYG/images/spacer.gif" style="width; 2px; height: 20px;">';
}

function seleccionar(img, fondo) {
  img.style.backgroundColor = fondo;
  img.style.border = '1px solid #0A246A';
}

function desseleccionar(img) {
  img.style.backgroundColor = '#F0F0EE';
  img.style.border = '1px solid #F0F0EE';
}

function getDocument(iframe) {
  return isIE? document.frames[iframe.id].window.document : iframe.contentDocument;
}

function executeCommand(element, command) {
  var text = null;
  if (command.toLowerCase() == "insertimage") {
    text = prompt("Introduce la URL de la imagen", "");
    if (text == null || text == "") return;
  }
  if (command.toLowerCase() == "createlink") {
    text = prompt("Introduce la URL del enlace\nSi no tienes texto seleccionado no realizar ninguna accin", "");
    if (text == null || text == "") return;
  }
  var iframe = document.getElementById(element);
  iframe.contentWindow.focus();
  getDocument(iframe).execCommand(command, false, text);
}