editor WYSIWYG

[acholaco]

Hola:
He conseguido el editor para un campo de un formulario de tipo textarea el editor WYSIWYG hecho en Javascript y me funciona perfectamente.

El único problema que tengo es que la barra de herramientas donde está lo dealinear a la derecha, poner negrita, cursiva, subrayado, etc... (los iconos, vamos...) se coloca en la parte inferior del textarea, es decir debajo de lo que escribes y yo quiero que se coloque en la parte superior tal y como sucede aquí desde donde estoy insertando este mensaje.

Si alguno sabeís en qué parte del código he de cambiar algo para que salga arriba os lo agradecería mucho.
Un saludo!

[Panino5001]

Cambiarlo no te será tan fácil. Posiblemente te convenga buscar otro más acorde a tu gusto.

[acholaco]

dame algunas alternativas a él y que al igual que WYSIWYG sea muy fácil tanto de insertar como de poder cambiar algunas cosas. Repito que para WYSIWYG es muy fácil cambiar los iconos que quieres poner pero lo que es realmente difícil y no sé dónde se hace es lo de cambiar su posicionamiento.

Espero y confío en que alguien que lo haya usado pueda indicármelo.

Ciao!

[Panino5001]

Pero ni siquiera mencionás el nombre del editor que estás usando, y hay muchos, hasta hay uno en las faqs (podría adivinar que se trata de tinyMCE, aunque no estoy seguro).
Para cambiarlo, tendrás que estudiarte todo el core del editor, tarea que resultará ardua. Mejor buscar opciones: http://www.google.com.ar/search?hl=e...G=Buscar&meta=

[venkman]

Como dice Panino, dinos cómo se llama, porque si no creo que resulta un poco difícil saber si es fácil cambiarlo o no.

[acholaco]

Hola´sí, perdón por no haber hecho mención al mismo antes:
El editor es el Editor WYSIWYG v1.0 RC3
Podéis verlo aquí y descargarlo!
Gracias y un saludo!

[Panino5001]

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);
}

[acholaco]

creo que no, panino, creo que te estás equivocando porque no sale nada de nada, ni arriba ni abajo.
De todas formas se agradece mucho tu intento.
Dime si te parece bien, en qué línea de codigo es donde hay que tocar o modificar algo para salga debajo en lugar de salir arriba.
Un saludo.!

[Panino5001]

Lo probé y funciona sin problemas. Es posible que haya algún caracter que agregue el bbCode del foro. El cambio es la ubicación de esta línea en el código original:

Código:

<span id="'+edit+'">IFRAME</span>\

Intentá cambiarla en el original, ubicándola como yo lo hice.

[acholaco]

mmmmmm no entiendo mucho pero voy a probar...
te diré si me funciona o no

[evander456]

soi nuevo en el foro.

miren lo que pasa es que tengo el programa wysiwyg web builder pero al momento de cambiar el color del fondo de pantalla-background a asul o negro y darle preview aparece el color que ecogi, pero al guardar los cambios y abrirlo para probarlo otrabes se cambia a color rojo y lla no puedo cambiarlo no se que susede, lo intento cambiar a verde, amarillo pero siempre al darle preview sigue de color rojo.

porfavor si pudieran ayudarme.