vista previa de un textarea que muestra bbcode
Publicado por girelaine (1 intervención) el 07/04/2013 16:23:31
Tengo un formulario por el cual a través de javascript vuelco sin problemas el contenido de unos campos imput a un textarea en formato bbcode. El problema es que no sé mucho de esto y quisiera que con esos mismos datos de los imputs aparecieran en una vista previa pero en formato html (no bbcode) para que funcionasen como vista previa.
El código para volcar el contenido de los imputs al textarea lo tengo en un archivo js:
y mi intento fallido de hacer algo parecido pero que de como resultado el contenido en html para la vista previa
En la plantilla del formulario la parte de código de la vista previa y textarea:
Lo que pretendo es que el contenido de los imputs se vuelque como hasta ahora en el textarea en formato bbcode, pero que a su vez ese mismo contenido sea mostrado en html en la vista previa para que se pueda apreciar su resultado. Si dicha vista previa se mostrase al pulsar un botón mejor.
¿alguna ayuda? gracias.
El código para volcar el contenido de los imputs al textarea lo tengo en un archivo js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* volcar contenido imput al textarea en formato bbcode
*/function generar(){
var $titulo = document.getElementById("titulo").value;
var $titulooriginal = document.getElementById("titulooriginal").value;
var $url_imagen = document.getElementById("url_imagen").value;
var $siteinfo = document.getElementById("siteinfo").value;
var $sinopsis = document.getElementById("sinopsis").value;
/**
* exportar codigo generado al textarea
*/document.getElementById("CodigoBBCode").value = codigo_exp1="[noparse][url="+$siteinfo+"][img2="+$url_imagen+"][/img2][/url][/noparse]"+$titulooriginal+"\n"+$titulo+"\n"+$sinopsis+"";
}y mi intento fallido de hacer algo parecido pero que de como resultado el contenido en html para la vista previa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* vista previa
*/function hacerVistaPrevia(){
var $titulo = document.getElementById("titulo").value;
var $titulooriginal = document.getElementById("titulooriginal").value;
var $url_imagen = document.getElementById("url_imagen").value;
var $siteinfo = document.getElementById("siteinfo").value;
var $sinopsis = document.getElementById("sinopsis").value;
document.getElementById("CodigoBBCode").value = codigo_html="<a href="+$siteinfo+"><img src="+$url_imagen+"></a>"+$titulooriginal+"\n"+$titulo+"\n"+$sinopsis+"";
document.getElementById('vistaPrevia').innerHTML = codigo_html.value.split(/\n/).join("<br />");
}En la plantilla del formulario la parte de código de la vista previa y textarea:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<fieldset>
<dl>
<dt><label>{L_GENCODE}:</label><br>
<span>{L_EXP_GENCODE}</span></dt>
<dd> <input value="{L_GENERATE}" name="{L_GENERATE}" onclick="generar();"
class="button1" type="button"> <input value="{L_SELECT}" name="{L_SELECT}"
onclick="javascript:copia_portapapeles()" class="button1" type="button">
<input value="{L_RESET}" name="{L_RESET}" class="button1" type="reset"><br>
<br>
<textarea name="CodigoBBCode" id="CodigoBBCode" class="inputbox"
rows="5" cols="75" onkeyup="hacerVistaPrevia()"></textarea>
</dd>
</dl>
</fieldset>
<fieldset>
<dl>
<dt><span>{L_EXP_VISTAPREVIA}</span></dt>
<dd><div id="vistaPrevia"></div>
</dd>
</dl>
</fieldset>
Lo que pretendo es que el contenido de los imputs se vuelque como hasta ahora en el textarea en formato bbcode, pero que a su vez ese mismo contenido sea mostrado en html en la vista previa para que se pueda apreciar su resultado. Si dicha vista previa se mostrase al pulsar un botón mejor.
¿alguna ayuda? gracias.
Valora esta pregunta
0