Foros del Web » Programando para Internet » PHP »

Aplicar estilos al mensaje

Estas en el tema de Aplicar estilos al mensaje en el foro de PHP en Foros del Web. Hola a todos! De nuevo tengo una duda y no sé por dónde empezar a buscar, ni siquiera sé si es en el foro de ...
  #1 (permalink)  
Antiguo 22/07/2008, 12:36
Avatar de Anastasiaphp  
Fecha de Ingreso: junio-2006
Ubicación: El patio de mi casa
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 3
Sonrisa Aplicar estilos al mensaje

Hola a todos!

De nuevo tengo una duda y no sé por dónde empezar a buscar, ni siquiera sé si es en el foro de php donde tengo que preguntar.

Lo que quiero es hacer algo parecido a lo que se ve cuando escribimos un mensaje en este foro, que si le doy a B, me pone las etiquetas
Código HTML:
[B][/B]
y me aplica la negrita al texto. O si quiero cambiar la tipografía, o poner cursiva, etc. ¿Podéis guiarme en esto? ¿Por dónde empiezo?

Gracias
  #2 (permalink)  
Antiguo 22/07/2008, 13:02
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 12 años, 2 meses
Puntos: 101
Respuesta: Aplicar estilos al mensaje

Hola,
Esto es lo que buscas:
Código PHP:
$mensaje $_POST['campo'];
$mensaje str_replace("[b]","<b>",$mensaje) ; $mensaje str_replace("[/b]","</b>",$mensaje) ;
$mensaje str_replace("[img]","<img src=\"",$mensaje) ; $mensaje str_replace("[/img]","\" border=\"0\">",$mensaje) ;
$mensaje preg_replace("/\[color=((#)?[0-9a-z]+)\]/i","<font color=\"\\1\">",$mensaje) ; $mensaje str_replace("[/color]","</font>",$mensaje) ;
$mensaje preg_replace("/\[color=((#)?[0-9a-z]+)\]/i","<font color=\"\\1\">",$mensaje) ; $mensaje str_replace("[/color]","</font>",$mensaje) ;
$mensaje preg_replace("/\[url\](www\..+)\[\/url\]/i","<a href=\"http://\\1\" target=\"_blank\">\\1</a>",$mensaje) ;
$mensaje preg_replace("/\[url\](.+)\[\/url\]/i","<a href=\"\\1\" target=\"_blank\">\\1</a>",$mensaje) ;
$mensaje preg_replace("/\[url=(www\..+)\](.+)\[\/url\]/i","<a href=\"http://\\1\" target=\"_blank\">\\2</a>",$mensaje) ;
$mensaje preg_replace("/\[url=(.+)\](.+)\[\/url\]/i","<a href=\"\\1\" target=\"_blank\">\\2</a>",$mensaje) ;
$mensaje str_replace("[i]","<i>",$mensaje) ; $mensaje str_replace("[/i]","</i>",$mensaje) ;
$mensaje str_replace("[u]","<u>",$mensaje) ; $mensaje str_replace("[/u]","</u>",$mensaje) ; 
Esto sirve como:
[ b ] t e x t o [ / b ]
[ i m g ] i m a g e n [ / i m g ]
[ c o l o r = r e d ] t e x t o [ / c o l o r]
[ u r l ] u r l [ / u r l ]
[ u r l = d i r e c i o n] c l i c [ / u r l ]
[ i ] T e x t o [ / i ]
[ u ] T e x t o [ / u ]
(todo eso, pero sin los espacios)
Suerte
Salu2
__________________
Half Music - www.halfmusic.com
  #3 (permalink)  
Antiguo 22/07/2008, 16:21
Avatar de Anastasiaphp  
Fecha de Ingreso: junio-2006
Ubicación: El patio de mi casa
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Aplicar estilos al mensaje

Muchas gracias, pato12, mañana me pondré con ello
  #4 (permalink)  
Antiguo 23/07/2008, 09:41
Avatar de Anastasiaphp  
Fecha de Ingreso: junio-2006
Ubicación: El patio de mi casa
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Aplicar estilos al mensaje

Aquí estoy de nuevo con la tarea casi hecha a falta de un detalle que no sé cómo hacer.
Esto es lo que he hecho:

Página uno
Código HTML:
<script language="JavaScript"> 
function estilos(Which){ 
document.formulario.mensaje.value = document.formulario.mensaje.value + Which; 
} 
</script>

<a href="javascript:estilos('[B]'+'[/B]')"><strong>Negrita</strong></a> | 
<a href="javascript:estilos('[I]'+'[/I]')"><em>Cursiva</em></a> 
<br />

<form name="formulario" action="proceso.php" method="post"> 
<textarea name="mensaje" cols="40" rows="10"></textarea>
<br />
<input type="submit" name="Submit" value="Enviar"> 
</form> 
Página dos
Código PHP:
<?php
$mensaje 
$_REQUEST['mensaje']; 
$mensaje str_replace("[B]","<strong>",$mensaje);
$mensaje str_replace("[/B]","</strong>",$mensaje); 
$mensaje str_replace("[I]","<em>",$mensaje);
$mensaje str_replace("[/I]","</em>",$mensaje); 

echo 
$mensaje;
?>
Hasta aquí todo bien, funciona. Pero lo que no consigo es que cuando le doy al enlace "negrita" que me pone en el textarea [B ][/B ], lo haga donde está el cursor o a la izquierda y a la derecha del texto que el usuario señale.

¿Podéis ayudarme? Por más que busco información no encuentro forma de hacerlo

Saludos
  #5 (permalink)  
Antiguo 23/07/2008, 11:17
Avatar de Anastasiaphp  
Fecha de Ingreso: junio-2006
Ubicación: El patio de mi casa
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Aplicar estilos al mensaje

Encontré esto:
http://www.forosdelweb.com/f13/poner...re-b-b-332796/

Pero como no controlo javascript no sé como manejarlo ¿Alguien sabe como hacerlo en lo que he enviado? ¿Más sencillo?
  #6 (permalink)  
Antiguo 23/07/2008, 11:52
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 12 años, 2 meses
Puntos: 101
Respuesta: Aplicar estilos al mensaje

Hola,
Preuba esta function:
Código HTML:
<script>
flag=0; // Cambiar a 1 su queres que se escriba en mayuscula o catiba la funcion capIt();
function addTex(let){
var story = document.miformulario.micampo; // El campo a escribir
if(let=="BACK"){
story=story.value.substring(0, story.length-1);
story.value=story.value;
story.focus();
}
else if(flag==1){
story.value+=let.toUpperCase();
flag=0;
story.value=story.value;
story.focus();
}
else{
story.value+=let;
flag=0;
story.value=story.value;
story.focus();
}
}
function capIt(){
flag=1;
}
</script> 
y estas:
Código HTML:
<script>function escribir_web(){
title = prompt('Titulo:',"");
if(title!=null){
web = prompt('Direcion web:',"http://");
if(web=="http://" || web==null){
alert('No as escrito una direccion valida.');
}else{
addTex('[url='+web+']'+title+'[/url]');
}
}
}
function b(){
texto = prompt('Texto en negritas:',"");
if(texto==null || texto==""){
}
else{
addTex('[b]'+texto+'[/b]');
}
}
function i(){
texto = prompt('Texto:',"");
if(texto==null || texto==""){
}
else{
addTex('[i]'+texto+'[/i]');
}
}
function u(){
texto = prompt('Texto subrayado:',"");
if(texto==null || texto==""){
}
else{
addTex('[u]'+texto+'[/u]');
}
}
function imagen(){
image = prompt('Direcion de la imagen:',"http://");
if(image==null || image==""){
}
else{
addTex('[img]'+image+'[/img]');
}
}
function colo(){
texto = prompt('Texto:',"");
if(texto==null || texto==""){
}
else{
color = prompt('Color:  (Ej.: red,blue o puede ser html)',"");
if(color==null || color==""){
}else{
addTex('[color='+color+']'+texto+'[/color]');
}
}
}</script> 
Suerte
Salu2
__________________
Half Music - www.halfmusic.com
  #7 (permalink)  
Antiguo 23/07/2008, 13:03
Avatar de Anastasiaphp  
Fecha de Ingreso: junio-2006
Ubicación: El patio de mi casa
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 3
Respuesta: Aplicar estilos al mensaje

Muchas gracias, pato12, por tus aportes
He probado las funciones que me dices, pero finalmente he utilizado este código, que aunque me parecía un poco lioso, he visto que es muy fácil de aplicar. Lo dejo aquí para el que lo necesite.



Código HTML:
<script language="JavaScript" type="text/javascript">
function storeCaret(text)
{
	if (typeof(text.createTextRange) != 'undefined')
		text.caretPos = document.selection.createRange().duplicate();
}
function okram(text1, text2)
{

// Aqui la referencia a tu campo textarea que esta siendo editado
var textarea = document.form.msg;

	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
		caretPos.select();
	}
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;
		textarea.value = begin + text1 + selection + text2 + end;
		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script> 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:29.