Aplicar estilos al mensaje

[Anastasiaphp]

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

[pato12]

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

[Anastasiaphp]

Muchas gracias, pato12, mañana me pondré con ello

[Anastasiaphp]

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

[Anastasiaphp]

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?

[pato12]

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

[Anastasiaphp]

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>