Javascript: Parágrafos Em Textarea

[Rastazituh]

Boas pessoal !

Tenho um código que faz o seguinte: tenho um botão, tenho um textarea. Ao seleccionar uma parte do texto do textarea e clickar nesse botão, o script adiciona tags <b></b> à volta do texto seleccionado. O código Javascript é:

function formatText (tag) { 
        var selectedText = document.selection.createRange().text; 
         
        if (selectedText != "") { 
            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">"; 
            document.selection.createRange().text = newText; 
        } 
    } 

E o botão é:

<input type="button" class="button2" value="Bold" onclick="formatText ('b');">

Bem, eu queria fazer o mesmo mas para outras coisas. A primeira era para adicionar as tags <p align="center"></p>, mas a minha sintaxe JS não é lá muito boa. Fiz algo como: JavaScript:

function formatParagrafos (tag1,tag2) { 
        var selectedText = document.selection.createRange().text; 
         
        if (selectedText != "") { 
            var newText = "<" + tag1 + ">" + selectedText + "</" + tag1 + ">"; 
            document.selection.createRange().text = newText; 
        } 
    } 

Botão:

<input type="button" class="button2" value="Centrado" onclick="formatParagrafos ('p align="center"','center');">

Bem, ao que parece, o facto de ter as aspas em "center" (botão), dá erro.. Experimentei colocar o atributo align="" no próprio script mas dá erro, também.. Alguém pode-me dizer de que forma devo fazer ? A segunda dúvida penso ser mais simples. Quer criar um botão que, ao ser premido, insira <br><br> no local em que o cursor se encontrava. Mais uma vez não consigo fazer. Encontrei na net um script que, ao premirmos a tecla Enter, ele adiciona automaticamente uma tag <br>, mas não funciona. Preciso mesmo de colocar as tags <br> porque é para inserir conteúdo em MySQL, logo tenho de formatar o texto. O tal script é:

<textarea rows="10" cols="50" id="myID" onfocus="javascript:vtbID='myID;" onblur="javascript:vtbID=null;"> 

</textarea> 

<script language="JavaScript" type="text/javascript"> 
<!-- 

var vtbID=null; 

function vtbKeyPress(e){ 
if (vtbID==null){ return } 
if (!document.all){ if (e.which!=8&&e.which!=13){  return;  }  } 
  else { if (event.keyCode!=8&&event.keyCode!=13){ return;  }  } 
document.getElementById(vtbID).value+='<br>' 
} 

if (!document.all){ 
document.captureEvents(Event.KEYDOWN) 
} 

document.onkeypress=vtbKeyPress 

<!----> 
</script> 

Desde já agradeço a atenção.

[Rastazituh]

Alguém sabe ?

[jeronymo]

1) não entendi, você quer centralizar o texto ou fazer o parágrafo?

se for o primeiro, você pode tentar usar a tag <center>... se for o segundo, tente usar a tag <dd>...

2) em js eu não sei como fazer... eu só sei fazer com php e tenho idéia de como fazer com asp... você pode usar um desses dois?

[Ricardo Cobain]

Olha quando você manda o valor ('p align="center"','center') o script irá fechar a função antes da hora, você tem as seguintes opções

- eviar : ('p align='center'','center')

- Ou no script mudar as aspas de " para ' ,impedindo esse conflito

- Ou enviar só ('center','center') e botar as tags no script

A e sobre o segundo você parece nen estar executando a funcão!

Cara eu não acredito que era só isso para farer a inserção dos códigos selecionando!!!

Espero que tenha ajudado!!!

Estou fazendo um editor tipo esse, deixe um conto aqui(mensagem) e quando eu terminar eu te mando!

[Ricardo Cobain]

Uma dica:

Use

<script>
function formatText (tag) { 
       var selectedText = document.selection.createRange().text; 

       if (selectedText != "") { 
           var newText = "<" + tag + ">" + selectedText + "</" + tag + ">"; 
           document.selection.createRange().text = newText; 
       } 

     else{alert('Selecione o texto!')}
} 
</script>

Para quando o usuario se esquecer de selecionar, aparecer uma mensagem!

[Rastazituh]

1) Ricardo Cobain, obrigado pela última dica ! Vou utilizá-la.

2) Jeronymo, é verdade, posso usar as tags <center> e </center>.. Mas e no caso do justificado ? Terei mesmo de usar as <p align="justify"></p>.. Mas segundo o que o Ricardo Cobain disse, se trocar " por ' também será interpretado como código HTML. Não sabia disso. E funcinou ! =)

3) E sobre as quebras de linha ? Alguém tem alguma ideia ? É que, neste caso, o texto não tem de estar seleccionado..

[Rastazituh]

Pessoal, encontrei um HTML Editor TextArea em Javascript, mas não sei se é bom.. O que acham ?

The Code Project

Bem, ele não serve para mim porque não tem todas as opções de que preciso, mas pode ser bom para alguns de vós, inclusive para o Ricardo Cobain que andava à procura de alguns editores para construir o seu próprio, segundo o que li no outro tópico..

Bem, continuo a aguardar respostas às minhas dúvidas sobre as quebras de linha e imagens. Obrigado.

----UPDATE----

Encontrei um novo JS que, ao premir Enter, adiciona uma <br>, mas é um pouco estranho. Vejam:

function insert_br(text)
{
	var normalized_Enters = text.replace(/\r|\n/g, "\r\n");
	var text_with_br = normalized_Enters.replace(/\r\n/g, "<br />");
	return text_with_br;

}