TextArea

Setembro 26, 2008

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...

fercosmig · Setembro 26, 2008

talvez já de uma ideia:

http://forum.wmonline.com.br/index.php?showtopic=173431

http://www.google.com/search?q=selectionSt...lient=firefox-a

http://forum.imasters.uol.com.br/lofiversi...hp/t102257.html

marcos_804 · Outubro 2, 2008

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.

Entrar

TextArea

Pergunta

Guest Victor Silva

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

marcos_804

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades