Ir para conteúdo
Fórum Script Brasil
  • 0

Editor de Texto Dinâmico


Lucas M

Pergunta

Eu queria saber como fazer um editor de texto com textarea e não iframe, e que que este editor fosse automático, ou seja, clicou em negrito todo o texto escrito ficasse em negrito, sem a necessidade de selecionar o texto, tem como?

<html>
    <head>
        <style type="css">
            
        </style>
        &lt;script type="text/javascript">
        /*function Iniciar() {
            editor.document.designMode = 'On';
        }*/
        
        function fonte(fonte) {
            if(fonte != ''){
                editor.document.execCommand('fontname', false, fonte);
            }
        }
        
        function negrito() {
            editor.document.execCommand('bold', false, null);
        }

        function italico() {
            editor.document.execCommand('italic', false, null);
        }

        function sublinhado() {
            editor.document.execCommand('underline', false, null);
        }
        
        
        </script>
    </head>
    <body onLoad="Iniciar()">
        <div align="center">
            <input type="checkbox" name="Negrito" id="bold" style="cursor:hand" value="B" onClick="negrito()" />
            <input type="checkbox" name="Italico" id="italic" style="cursor:hand" value="I" onClick="italico()" />
            <input type="checkbox" name="Sublinhado" id="underline" style="cursor:hand" value="U" onClick="sublinhado()" /> |
            
            <select name="fonte" onChange="fonte(this.options[this.selectedIndex].value)">
                <option value="Arial">Arial</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <option value="Times New Roman">Times New Roman</option>
            </select>
            
            <input type="text" id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)" />
            
            <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
                <option style="color:black;" value="black">preto</option>
                <option style="color:red;" value="red">vermelho</option>
                <option style="color:blue;" value="blue">azul</option>
                <option style="color:green;" value="green">verde</option>
                <option style="color:pink;" value="pink">rosa</option>
            </select>
            <br>
            <textarea id="editor" style="width:500px; height:200px;"></textarea>
        </div>
    </body>
</html>

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Substitua a função negrito por esta:

function negrito() {
            editor.document.execCommand('bold', false, null);
var i=document.getElementById('editor');
if(i.style.fontWeight==='bold'){i.style.fontWeight='normal';}
else{i.style.fontWeight='bold';}
        }

Editado por MateusV.
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...