Editando Texto Selecionado

[Pilantra]

Olá

Eu estou fazendo um webmail e precisava saber como eu editaria um texto selecionado!! Por exemplo, a pessoa seleciona a palavra "Olá" e ele quer deixa-la em NEGRITO, como eu faria isso em JavaScript!?!? E em Italico, Sublinhado, e para deixar o texto colorido!?!?

Agradeço bastante a ajuda

Obrigado

T+

Pilantra

[noob]

Olá

Eu estou fazendo um webmail e precisava saber como eu editaria um texto selecionado!! Por exemplo, a pessoa seleciona a palavra "Olá" e ele quer deixa-la em NEGRITO, como eu faria isso em JavaScript!?!? E em Italico, Sublinhado, e para deixar o texto colorido!?!?

Agradeço bastante a ajuda

Obrigado

T+

Pilantra

Vê se isso serve, nem fui eu que fiz vi ai pelo fórum xD

<style>
.bold {
width: 22px;
height: 22px;
text-align: center center;
font-weight: bold;
}

.italic {
width: 22px;
height: 22px;
text-align: center center;
font-style: italic;
}

.underline {
width: 22px;
height: 22px;
text-align: center center;
text-decoration: underline;
}
</style>
<table width="626" height="255" border="1" cellpadding="0" cellspacing="0">
<tr>
  <td align="left" valign="top">
  <span id="editor" contenteditable style="width:100%;height:100%" OnKeyPress="return digitacao(this)"></span>
  </td>
</tr>
</table>
    <table width="400" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td><input name="bold" type="submit" id="bold" value="N" class="bold" onClick="transform('b')">
                <input name="italic" type="submit" id="italic" value="I" class="italic" onClick="transform('i')">
                <input name="underline" type="submit" id="underline" value="S" class="underline" onClick="transform('u')"></td>
        </tr>
    </table>
    <br>
<a href="javascript:fonte()">Código Fonte</a>
<script language="JavaScript">
editor.focus();
function digitacao(obj)
{
if(event.keyCode==13)
{
  obj.appendChild(document.createElement('<br>'));
  obj.appendChild(document.createElement('')); // Para saltar a linha
  return false;
}

return true;
}
function fonte()
{
var texto = editor.innerHTML;
alert(texto);
}
function transform(type)
{
var objText = document.selection.createRange();
if(type=='i')
    objText.pasteHTML('<i>'+objText.text+'</i>');
if(type=='b')
    objText.pasteHTML('<b>'+objText.text+'</b>');
if(type=='u')
    objText.pasteHTML('<u>'+objText.text+'</u>');
}
</script>

[Pilantra]

Ih cara esse do fórum aqui nem deu certo!!! Num existe uma função que você faz o que quiser com o texto selecionado?!?!

[André Gusmão]

Eu conheço esse código, hehehe...

É o seguinte cara:

Para você modificar um texto selecionado, usando negrito, sublinhado, italico, etc, você não deve usar o Textarea, pois ele aceita somente texto sem HTML.

Você deve criar um objeto editável, como um Span ou Div, como nesse exemplo:

<span contenteditable style='width:400px;height:400px;border:solid 1px'>

</span>

Aí você cria uma função, por exemplo, pro negrito:

<script language="JavaScript">

function negrito()

{

    var objText = document.selection.createRange();

    objText.pasteHTML('<b>'+objText.htmlText+'</b>');

}

</script>

Aí, basta chamar a função, por exemplo, através de um botão:

<input type="button" value="Negrito" onClick="negrito()">

É isso aí!!!