Añadir texto en un editor wysiwig con iframe

[shendeluth]

Hola, yo encontré un còdigo de editor wysiwig que me moló más que el htmlarea en la pàgina de mozilla (www.mozilla.org) que funciona casi todo en mozilla y iexplorer (para que funcione en iexplorer se ha de mirar si estamos en ese navagador y cambiar algunas rutas de propiedades del document en javascript). También es con un iframe, así que muy diferente no creo que sea.

Pues bueno, mi problema es trabajando con php con este editor. Al editar texto en el iframe , que tengo dentro de un formulario, he creado una funcion en javascript que pilla el texto del iframe en html (propiedad innerHTML) y lo coloca en el value de una <INPUT type=hidden> y así al presionar el botón de enviar se envia todo con el formulario y lo guarda en una base de datos. El problema es a la hora de editar lo que he guardado en la base de datos otra vez mediante un iframe (es un servidor de noticias, por eso lo de editar) . He intentado de mil maneras introducir todo el texto en html de la base de datos que guardo en una variable en php, en el iframe pero no me acaba de salir: Hago una funcion en javascript a la que le paso el texto de la variable en php, pero el texto es tan largo que no lo puede pillar todo y,claro, se corta a la mitad del texto y da error javascript (no se si me explico) . Entonces lo que hice es poner todo el texto en un array donde cada posición es un caracter. Pues utilizando

for (i=0;i<array.length;i++){
document.getElementById(id).contentWindow.document .body.innerHTML += array[i];
}

Se me introduce el texto pero sin los < de los tags y claro el texto no sale formateado en el iframe porque no pilla los tags. Esta forma la encuentro bastante chapuzilla, así que si me podeis decir alguien como poder meter el text entero, sim partirlo en un array, en el iframe estaria mucho mejor. Sinó a ver si me podeis ayudar con el caso del array.

Gracias.

PD: Si lo he de poner en otro foro descidmelo porfavor.

[epplestun]

buenas para eso es muy sencillo, tienes la posibilidad de indicar en el iframe la ruta de un archivo a abrir, es decir si haces un:

Código PHP:

 <iframe src="ver.php?s=<?php urlencode(aki el texto tuyo); ?>">  

Y en ver un:

Código PHP:

  echo urldecode($_GET['s']);  
   

Te curras un poquillo mas el ver.php y listo jeje.

Por cierto HTMLArea funciona sobre Mozilla tambien y te aseguro que es muxxoooooooooo mas potente que el Editor de Mozilla jeje ya que Mozilla tira de execCommand y de unos comandos predefinidos, jeje que es lo que me imagino que estas haciendo jeje, lo hice yo tambien en su devido momento, ahora mismo yo esoty trabajando en un proyecto similar a HTMLArea, pero la inserccion de imagenes pues no son remotas, sino que tu seleccionas la imagen localmente y se encarga de insertarla y subirla a la red, con previews y demas movidas .... ahora lo unico que tengo que averiguar es como insertar tablas y modificarlas al estilo de Dreamweaver, seleccionando las celdas, columnas y trabajarlas con sus propiedades para hacerlo totalmente visual, y para Mozilla jeje ya que trabajo sobre Linux y como comprenderas jeje no uso IE jeje

Pues nada haz lo que te dije de urlencode y urldecode

[shendeluth]

Muchas gràcias, queria intentar hacerlo como te he comentado pero lo he hecho como has dicho y va perfecto.

Saludos.

[shendeluth]

Hola de nuevo, me podrias ayudar una vez más? Te pongo un codigo a continuación y si me pudieras decir que es incompatible en internet explorer y como hacerlo compatible me harias un gran favor. Sinó puedes no pasa nada:

Código:

// INICI Editor
var command = '';

function InitToolbarButtons() {
  kids = document.getElementsByTagName('DIV');

  for (var i=0; i < kids.length; i++) {
    if (kids[i].className == 'imagebutton') {
      kids[i].onmouseover = tbmouseover;
      kids[i].onmouseout = tbmouseout;
      kids[i].onmousedown = tbmousedown;
      kids[i].onmouseup = tbmouseup;
      kids[i].onclick = tbclick;
    }
  }
}

function tbmousedown(e)
{
  this.firstChild.style.left = 2;
  this.firstChild.style.top = 2;
  this.style.border='inset 1px';
  e.preventDefault();
}

function tbmouseup()
{
  this.firstChild.style.left = 1;
  this.firstChild.style.top = 1;
  this.style.border='outset 1px';
}

function tbmouseout()
{
  this.style.border='solid 1px #80B7EB';
}

function tbmouseover()
{
  this.style.border='outset 1px';
}

function insertNodeAtSelection(win, insertNode)
{
      // get current selection
      var sel = win.getSelection();

      // get the first range of the selection
      // (there's almost always only one range)
      var range = sel.getRangeAt(0);

      // deselect everything
      sel.removeAllRanges();

      // remove content of current selection from document
      range.deleteContents();

      // get location of current selection
      var container = range.startContainer;
      var pos = range.startOffset;

      // make a new range for the new selection
      range=document.createRange();

      if (container.nodeType==3 && insertNode.nodeType==3) {

        // if we insert text in a textnode, do optimized insertion
        container.insertData(pos, insertNode.nodeValue);

        // put cursor after inserted text
        range.setEnd(container, pos+insertNode.length);
        range.setStart(container, pos+insertNode.length);

      } else {


        var afterNode;
        if (container.nodeType==3) {

          // when inserting into a textnode
          // we create 2 new textnodes
          // and put the insertNode in between

          var textNode = container;
          container = textNode.parentNode;
          var text = textNode.nodeValue;

          // text before the split
          var textBefore = text.substr(0,pos);
          // text after the split
          var textAfter = text.substr(pos);

          var beforeNode = document.createTextNode(textBefore);
          var afterNode = document.createTextNode(textAfter);

          // insert the 3 new nodes before the old one
          container.insertBefore(afterNode, textNode);
          container.insertBefore(insertNode, afterNode);
          container.insertBefore(beforeNode, insertNode);

          // remove the old node
          container.removeChild(textNode);

        } else {

          // else simply insert the node
          afterNode = container.childNodes[pos];
          container.insertBefore(insertNode, afterNode);
        }

        range.setEnd(afterNode, 0);
        range.setStart(afterNode, 0);
      }

      sel.addRange(range);
  };

function getOffsetTop(elm) {

  var mOffsetTop = elm.offsetTop;
  var mOffsetParent = elm.offsetParent;

  while(mOffsetParent){
   	mOffsetTop += mOffsetParent.offsetTop;
    mOffsetParent = mOffsetParent.offsetParent;
  }
 
  return mOffsetTop;
}

function getOffsetLeft(elm) {

  var mOffsetLeft = elm.offsetLeft;
  var mOffsetParent = elm.offsetParent;

  while(mOffsetParent){
    mOffsetLeft += mOffsetParent.offsetLeft;
    mOffsetParent = mOffsetParent.offsetParent;
  }
 
  return mOffsetLeft;
}

function tbclick()
{
  if ((this.id == 'forecolor') || (this.id == 'hilitecolor')) {
    parent.command = this.id;
    buttonElement = document.getElementById(this.id);
    document.getElementById('colorpalette').style.left = getOffsetLeft(buttonElement);
    document.getElementById('colorpalette').style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight;
    document.getElementById('colorpalette').style.visibility='visible';
  } else if (this.id == 'createlink') {
    var szURL = prompt('Enter a URL:', 'http://');
    if ((szURL != null) && (szURL != '')) {
      document.getElementById('edit').contentWindow.document.execCommand('CreateLink',false,szURL);
    }
  } else if (this.id == 'createimage') {
    imagePath = prompt('Enter Image URL:', 'http://');
    if ((imagePath != null) && (imagePath != '')) {
      document.getElementById('edit').contentWindow.document.execCommand('InsertImage', false, imagePath);
    }
  } else if (this.id == 'createtable') {
    e = document.getElementById('edit');
    rowstext = prompt('enter rows');
    colstext = prompt('enter cols');
    rows = parseInt(rowstext);
    cols = parseInt(colstext);
    if ((rows > 0) && (cols > 0)) {
      table = e.contentWindow.document.createElement('table');
      table.setAttribute('border', '1');
      table.setAttribute('cellpadding', '2');
      table.setAttribute('cellspacing', '2');
      tbody = e.contentWindow.document.createElement('tbody');
      for (var i=0; i < rows; i++) {
        tr =e.contentWindow.document.createElement('tr');
        for (var j=0; j < cols; j++) {
          td =e.contentWindow.document.createElement('td');
          br =e.contentWindow.document.createElement('br');
          td.appendChild(br);
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      table.appendChild(tbody);      
      insertNodeAtSelection(e.contentWindow, table);
    }
  } else {
    document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
  }
}

function Select(selectname)
{
  
  var cursel = getElementById(selectname).selectedIndex;
  /* First one is always a label */
  if (cursel != 0) {
    var selected = document.getElementById(selectname).options[cursel].value;
    document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
    getElementById(selectname).selectedIndex = 0;
  }
  document.getElementById('edit').contentWindow.focus();
}

function dismisscolorpalette()
{
  document.getElementById('colorpalette').style.visibility='hidden';
}


function Start() {
  document.getElementById('edit').contentWindow.document.designMode = 'on';
  //try {
  //  document.getElementById('edit').contentWindow.document.execCommand('undo', false, null);
  //}  catch (e) {
  //  alert('This demo is not supported on your level of Mozilla.');
  //}

  InitToolbarButtons();
  document.addEventListener('mousedown', dismisscolorpalette, true);
  document.getElementById('edit').contentWindow.document.addEventListener('mousedown', dismisscolorpalette, true);
  document.addEventListener('keypress', dismisscolorpalette, true);
  document.getElementById('edit').contentWindow.document.addEventListener('keypress', dismisscolorpalette, true);
}

Gracias.

[epplestun]

jeje ese codigo es de HTMLArea 3.0 no?¿ jeje por que me lo he estado mirando toda la tarde .... la verdad es que ahora mismo no te lo puedo mirar ... me imagino que quieres añadir tablas y demas movidas a tu iframe jeje que es justo lo que toy haciendo yo pero yo no esoty usando su codigo ... toy creandome el mio propio ... sobre IE me funciona perfectamente ahora mi problema esta sobre Mozilla y los malditos rangos jeje y las selecciones pero bueno ...

Yo para insertar cualquier codigo HTML me he creado:

Código:

function __createRange(sel) {
	if(document.all) {
		return sel.createRange();
	} else {
		try {
			return sel.getRangeAt(0);
		} catch(e) {
		}
	}
}
	
function __getSelection() {
	if(document.all) {
		return document.selection;
	} else {
		//aki esta mi problema
	}
}
function insertHTML(html) {
	var sel  = __getSelection();
	var ran  = __createRange(sel);
		
	if(document.all) {
		ran.pasteHTML(html);
	} else {
	}
}

Pues eso ... a ver si consigo hacer selecciones y rangos en Mozilla

[Tukzone]

En lo personal, nunca use HTMLArea y nunca lo usaria, ya que no es compatible con todos los navegadores.

Si quieren algo bueno, van a tener que ponerse con unos pesitos, y java es la solucion. Gratis no hay nada, creeanme, me pase 2 años buscando. Y cuando digo 2 años, si, me refiero a 730 dias :)

[shendeluth]

No es htmlarea, es el codigo del editor que està en la web de mozilla, por lo que va perfectamente en mozilla, pero en internet explorer da problemas.
Cuando te lo puedas mirar ya diras algo. Gracias.

[epplestun]

si tienes toda la razon ... ya decia yo que me sonaba ese codigo .... jeje www.alaplaya.com/~epplestun/editor.html jeje es el el primero que hice ... lo que pasa es que no funciona sobre Mozilla jeje

[epplestun]

Mira ami me esta quedando mas o menos asi:



Funciona perfectamente bajo IE y Mozilla sin ningun problema

[al3jo]

me podrias dar una mano? me gustaria darle formato a un campo de texto que ingreso desde un form pero no tengo idea de como hacerlo para que me guarde por ejemplo negritas, subrayados, etc.
Estoy trabajando con php y mysql. muchas gracias.
Al3jo