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

TextArea


Guest Victor Silva

Pergunta

Guest Victor Silva

Bom dia pessoal, sei que este tema é polêmico, e também sei que irão me propor FKEditor, ou qualquer outro

editor já pronto, porém eu gostaria de aprender, e não aplicar estes editores tendo em vista que a minha edição

do texto é muito mais simples ....

A questão é que tenho um textarea e necessito que ao clicar em um botão, seja inserido uma tag ("[/tag]").

Para inserir no fim do texto é simples, basta concatenar o valor do innerHTML, porem, a dificuldade se encontra

em inserir em um determinado ponto, ou seja, onde estiver o cursor.

Seria necessário capturar pelo menos a posição do cursor para conseguir fazer algo... ou sei lá.

alguém teria alguma dica? Ou a solução propriamente dita?

Muito obrigado pela atenção...

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Quando vi este post comecei a brincar um pouco, afinal programar significar um hobby para mim.

Vai o código aí amigo.

<html>

    <head>
        <title>.:: Create Range ::.</title>
        
        <script language="javascript">
        
        var arr_formata = Array("i---<i><!--replace--></i>",
            "u---<u><!--replace--></u>",
            "b---<b><!--replace--></b>",
            "hr---<!--replace--><hr>\n",
            "br---<!--replace--><br>\n",
            "sp---<!--replace-->&nbsp;",
            "tab---<!--replace-->&nbsp;&nbsp;&nbsp;&nbsp;",
            "a---<!--replace-->");
        
        
        function saidaHtml(strId, strTexto){
            
            if(strTexto.value.length == 0){
                document.getElementById(strId).innerHTML = "<span style='color:#FF0000'>Digite algo na caixa de texto para ver a saída aqui.</span>"
            }else{
                document.getElementById(strId).innerHTML = strTexto.value;
            }            
                
        }
        
        function selFormata(strTp){
            
            for(i = 0; i < arr_formata.length; i++){
                
                tmp = arr_formata[i].split("---");
                if(tmp[0] == strTp){
                    return tmp[1];
                }
                    
            }
            
            return false;            
                
        }
        
        function MexerSelecao(strTexto, strTp){
        
            var tmp_tp = selFormata(strTp);
            
            if (document.selection){
                
                strTexto.focus();
                sel = document.selection.createRange();
            
                if(tmp_tp){
                    tmp_tp = tmp_tp.replace("<!--replace-->", sel.text);
                    sel.text = tmp_tp;
                }
                
                strTexto.focus();
                
            }else{
            
            
                tmp_tp = selFormata(strTp);
                
                startPos = strTexto.selectionStart;
                endPos = strTexto.selectionEnd;
                
                strTmpIniTexto = strTexto.value.substring(0, startPos);
                strTmp = strTexto.value.substring(startPos, endPos);
                strTmpFimTexto = strTexto.value.substring(endPos);
                strTmp = tmp_tp.replace("<!--replace-->", strTmp);
                
                strTmp = strTmpIniTexto + strTmp + strTmpFimTexto;
                strTexto.value = strTmp;
                strTexto.focus();
                
            }
            
        }
        
        function acaoTecla(e){  
        if(document.all){  
            var key = event.keyCode;  
        }else{  
            var key = e.which;  
        }
        
        return key;
    }
    
    function trocaEnter(e, strTexto){
        if(acaoTecla(e) == 13){
            MexerSelecao(strTexto, 'br');
        }
    }
    
    
        
        
            
        </script>
    </head>
    <body>
    
        <form name="frm_range">
        <input type="button" value="itálico" onclick="MexerSelecao(frm_range.texto, 'i');">
        <input type="button" value="negruito" onclick="MexerSelecao(frm_range.texto, 'b');">
        <input type="button" value="sublinhado" onclick="MexerSelecao(frm_range.texto, 'u');">
        <input type="button" value="traço" onclick="MexerSelecao(frm_range.texto, 'hr');">
        <input type="button" value="tab" onclick="MexerSelecao(frm_range.texto, 'tab');">
        <input type="button" value="espaço" onclick="MexerSelecao(frm_range.texto, 'sp');">        
        
        <hr>
        <textarea cols="30" rows="10" name="texto" onkeyup="saidaHtml('verFormatacao', this)" onkeypress="trocaEnter(event, this);"></textarea>
        </form>
        
        <div id="verFormatacao"></div>
    
    </body>
</html>

Abraço.

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
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...