Imposible resaltar texto en iframe NO EDITABLE

Eux · #1 (**permalink**) 19/10/2011, 09:52

Hola a tod@s,

Me gustaría hacer una página en la cual tengo un texto NO EDITABLE y que el usuario pueda resaltar en amarillo algunas partes del texto.

Al principio lo quise hacer con un DIV pero tuve el mismo problema que tengo ahora mismo con iframe, y es que no soy capaz de poner el texto NO EDITABLE dado que eso hace que entonces no se pueda resaltar en amarillo.

Una de las soluciones que pensé que funcionaría seguro era hacerle lo siguiente a la funcion colorFondo:

function colorFondo(c){
editor.designMode='on';
var h = window.ActiveXObject?'backcolor':'hilitecolor';
editor.execCommand(h,false,c);
editor.designMode='off';
}

pues mi gozo en un pozo ya que esa solución sólo me valió para OPERA

Aquí os dejo el código entero por si alguien podría echarme una mano y hacer alguna prueba, o quizás le sirva para algún proyecto.

Código Javascript:

Ver original<script>
 
var editor;
 
function $(id){
    return document.getElementById(id);
}
 
function colorFondo(c){ 
    var h = window.ActiveXObject?'backcolor':'hilitecolor';
    editor.execCommand(h,false,c);
}
 
 
window.onload=function(){    
    editor=$('edit').contentDocument || $('edit').contentWindow.document;    
    editor.designMode='on';
}
 
function formato(f){    
    editor.execCommand(f, false, null); 
}
 
</script>  
</head>
 
<body>
 
 
 
<form id="form1" name="form1" method="post" action="">
 
  <iframe src="texto.html" id="edit" width="100%" height="300" style=" border:1px solid #000;" ></iframe>
  
  <input type="button" name="Submit1" value="Resaltar" onclick="colorFondo('yellow');" />
  <input type="button" name="Submit2" value="Deshacer" onclick="formato('undo')" />
  <input type="button" name="Submit3" value="Rehacer" onclick="formato('redo')" /> 
  
</form>
 
<br /><br />
 
<input type="button" value="Ver HTML" onclick="alert(editor.body.innerHTML)">
 
 
</body>
</html>

Gracias de antemano.

Eux · #2 (**permalink**) 20/10/2011, 03:28

Me acabo de dar cuenta que IE no necesita que se le habilite modo diseño para que funcione la función COLOREAR, de esta manera ya funciona:

Código Javascript:

Ver originalfunction colorFondo(c){ 
    var h = window.ActiveXObject?'backcolor':'hilitecolor';
    editor.execCommand(h,false,c);
}

pero claro, de esta manera tampoco soluciono nada ya que solo va en IE :S:S:S:S

Eux · #3 (**permalink**) 24/10/2011, 09:20

Al final he dado un cambio de rumbo ya que he encontrado una librería que se llama Rangy que ya hace todo el trabajo, os dejo la url por si alguien le interesa este tema aquí hay un ejemplo de cómo funciona [URL="http://rangy.googlecode.com/svn/trunk/demos/highlighter.html"]http://rangy.googlecode.com/svn/trunk/demos/highlighter.html[/URL]

También hay más información [URL="http://rangy.googlecode.com"]http://rangy.googlecode.com[/URL]