fckeditor formatear html

[danybarco]

Buenas, he creado una web y el editor de la misma utiliza fckeditor.
He creado unos plugins que ayudan al usuario a meter codigo especial para meter elementos tales como un boton en forma de altavoz que luego en la web pulsas y se reproduce un sonido. Esto lo hago poniendo unas etiquetas que luego interpreto.
Las etiquetas son algo asi: {audio nombredelarchivo}, x ej.
Lo q pasa es que quiero que el usuario no vea eso, sino el icono del altavoz o simplemente audio.
Me estoy mareando mucho, he buscado un monton de cosas y probado tb mucho pero no encuentro la manera de hacer q la vista normal del editor solo me ponga audio y qe la vista de codigo html del editor me ponga la etiqueta que crea.

¿Alguien sabe como va esto? ¿Alguien ha hecho algo parecido?

[Panino5001]

En lugar de colocar la identificación del audio de esa manera, podrías usar algo como esto:
iconoAltavoz.gif?audio=algo.mp3
iconoAltavoz.gif?audio=algo2.mp3
iconoAltavoz.gif?audio=algo3.mp3
Luego, cuando tomes el contenido html podrás obtener el valor del archivo de audio, que es un tema que tendrás que plantear con el leguaje de servidor que uses o de otra forma, usando expresiones regulares o lo que sea.
Pero desde javascript, podés insertar una imagen fácilmente usando esto:

Código PHP:

  var myf = document.getElementById("FCKeditor1___Frame");myf = myf.contentWindow.document || myf.contentDocument;var myf2=myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentWindow.document || myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentDocument;myf2.execCommand('InsertImage', false, 'iconoAltavoz.gif?audio=algo.mp3');  
   

Podés ver un ejemplo en marcha yendo a la página demo del fck editor:
http://www.fckeditor.net/demo
y, tras colocar lo que sigue en la barra de direcciones del navegador, hacer click en el botón ir:

Código PHP:

  javascript:var myf = document.getElementById("FCKeditor1___Frame");myf = myf.contentWindow.document || myf.contentDocument;var myf2=myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentWindow.document || myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentDocument;myf2.execCommand('InsertImage', false, 'http://www.forosdelweb.com/customavatars/avatar65984_1.gif?audio=algo.mp3');void(0);  
   

[danybarco]

El problema que tngo es que es un sistema que ya esta arraigado en la web, hay muchos datos que actualizar y no seria muy facil ya que tngo muchos usuarios a muy distintas horas.

Por otro lado, no es esa la unica etiqueta que he creado. Tambien me he creado otras etiquetas alguna de ellas lo que hace es crearme dentro de un contenido ejercicios que le permite al usuario elegir de entre unas respuestas determinadas la opcion correcta (le marco las opciones y le digo cual es la correcta con este lenguage), existe otro ejercicio que lo que hace es marcar en el contenido una serie de huecos y luego el usuario tendra una lista de palabras y las tendra q poner en el lugar correctos.

Es decir, que tengo una amplia extension de etiquetas que en un principio no se pensaba que se fueran a crear tantas y que ahora se necesita que se formateen de una manera determinada. El problema es que tngo que adaptarme a como estan hechas las etiquetas y formatear estas etiquetas para que el editor que hace los ejercicios no vea tanta etiqueta q al final lo que hace es molestarle y tarda mucho mas en darle el aspecto deseado al texto.

[Panino5001]

El asunto es que no podés tener una cadena de ese tipo y que te aparezca una imagen al mismo tiempo en el editor. Mi sugerencia es colocar la imagen con ese añadido en la url, y luego interpretar el html que entrega el editor para reemplazar el html de esas imágenes por la cadena con formato que mencionás. Ese reemplazo conviene hacerlo en el servidor con expresiones regulares, pero si preferís hacerlo con javascript, almacenando el html que entrega el editor en una variable llamada cad, el reemplazo podrías hacerlo con algo como esto:

Código:

<script>
var cad='algo<img src=iconoAltavoz.gif?audio=uno.mp3 />algo<img src="iconoAltavoz.gif?audio=dos.mp3" /> dddd <img src="iconoAltavoz.gif?audio=tres.mp3" /> ddd';
var pat=/\<img[\s\w"=]+iconoAltavoz.gif\?audio=[\s\w"=.\/]+\>+/ig;
pat2=/\?audio=([^"\/\>]+)/i;
function mf(m){
	var r=m.match(pat2);
	return '{audio '+r[1]+'}';
}
cad=cad.replace(pat,mf)
alert(cad)
</script>

Con eso, tendrías durante la visualización la imagen que querías y en la salida html los tags con nombre de archivo que necesitabas.

[danybarco]

Ok, probare y te digo, gracias.

[danybarco]

Un par de preguntas más:
¿Como recojo el texto del editor si lo hago con ASP.Net?
¿Y como hago que se lance el evento para modificar el texto cuando cargo el texto o cuando lo guardo?

[Panino5001]

Para recoger el texto con javascript, podés hacerlo así:

Código PHP:

  var myf = document.getElementById("FCKeditor1___Frame");
myf = myf.contentWindow.document || myf.contentDocument;
var myf2=myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentWindow.document || myf.getElementById('xEditingArea').getElementsByTagName('iframe')[0].contentDocument;
alert(myf2.body.innerHTML);  
   

Luego le aplicás lo anterior para cambiar el formato y finalmente podés grabar el resultado en un campo oculto.