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

pegar posição do mouse

vini_loock

Perguntado por vini_loock,

 Share

Pergunta

vini_loock

vini_loock

Postado
Postado

Olá.

Estou fazendo um editor de textos wising parte dele estou utilizando o execommand, mas tem tarefas que é preciso um pouco mais, como por exemplo criar um link, inserir uma imagem, etc.

Eu já fiz a parte de o usuario clicar em um botão ai aparece uma caixa de dialogo pedindo o texto e o url. Mas o problema é que usando o innerHTML ele escreverá sempre no final, e eu queria que ele escrevesse onde esteja posicionado o cursor do mouse.

Eu vi alguns exemplos utilizando textarea, mas não consegui fazer funcionar, acredito que seja por eu estar usando iframe.

alguém teria uma dica ou exemplo?

Vlw.

Vinicius

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
vini_loock

vini_loock

Postado
  • Autor
Postado

Olha cara, vai ser meio difícil eu te mostrar o que eu tentei, porque faz um tempo que esse meu editor está "abandonado" e eu tentei axar na net e não achei nada, dai procurei algo com jquery e achei esse é bem parecido com os que eu tentei antes:

http://www.zatecus.com/blog-jquery-mini-ed...bcode-post.html

Não sei se funcionará com um iframe, mas vou testar.

Continuo aberto a novas sugestões.

Vwl

Link para o comentário
Compartilhar em outros sites
  • 0
vini_loock

vini_loock

Postado
  • Autor
Postado

Estou fazendo basicamente igual ao do link que passei, só que usando iframe e no lugar de value eu coloco document:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Mini-editor BBCode</title>
        <style type="text/css">
            body {margin: 20px; font-family: Verdana; font-size: 12px;}
            a.buttons {border: 1px solid #ddd; text-align: center; font-weight: bold; text-decoration: none; padding: 4px; margin-right: 4px; color: #333;}
                a.buttons:hover {background-color: #f9f9f9;}
                a.buttons:active {background-color: #dddddd;}
            p {margin: 0 0 10px 0;}
            textarea {border: 1px solid #ddd; font-family: "Courier New", Courier, monospace; font-size: 12px;}
            small {font-size: 10px; color: #999;}
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
        
            function inicia(){
                exemplo.document.designMode = 'On';
            }
        
            $.miniBB = function (id, bblink)
            {
                
                /* Lista de BBCodes */
                
                var BBCodes = 
                {
                    b:             '<b>%</b>',
                    i:             '[i]%[/i]',
                    u:             '[u]%[/u]',
                    p:             '[p]%[/p]',
                    h1:         '[h1]%[/h1]',
                    h2:         '[h2]%[/h2]',
                    h3:         '[h3]%[/h3]',
                    h4:         '[h4]%[/h4]',
                    h5:         '[h5]%[/h5]',
                    h6:         '[h6]%[/h6]',
                    url:         '[url=@]%[/url]',
                    img:         '[img=@]',
                    hr:            '[hr]',
                    br:            '[br]'
                };
                
                /* Algumas variáveis */
                
                var BBType, textarea, selected, ie_selected, replaced, value = '';
                
                /* Precaução =P */
                
                id = id.replace('#');
                
                /* Quando um botão do BBCode é clicado... */
                
                $(bblink).click(function()
                {    
                
                    /* Ele separa da hash o tipo de botão */
                
                    BBType = this.href.split('#').pop();
                    
                    /* Se o tipo de botão existir na lista do BBCode */
                    
                    if (BBCodes[BBType])
                    {
                        
                        /* Ele "chama" o elemento com a textarea */
                        
                        textarea = document.getElementById(id.split('#').pop());
                        
                        /* Se o browser for IEca, ele "pega" o texto selecionado */
                        
                        if (document.selection)
                        {
                            ie_selected = document.selection.document.createRange();
                            selected = ie_selected.text;
                        }
                        
                        /* Se o browser for Chrome/FF/Safari, também... */
                        
                        else
                        {
                            selected = textarea.document.substring(textarea.selectionStart, textarea.selectionEnd);
                        }
                        
                        /* A seguir, ações para os diferentes tipos de BBCodes */
                        
                        switch (BBType)
                        {
                            
                            /* Ação para BBCode simples com abertura/fechamento */
                            
                            default:
                                replaced = BBCodes[BBType].replace('%', selected);
                            break;
                            
                            /* Ação para links */
                            
                            case 'url':
                                value = prompt ("Digite a URL para o link:", "http://");
                                if (!value) value = '';
                                replaced = BBCodes[BBType].replace('@', value);
                                replaced = replaced.replace('%', selected);
                            break;
                            
                            /* Quebras de página e linhas horizontais (tags sem fechamentos) */
                            
                            case 'br':
                            case 'hr':
                                replaced = selected + BBCodes[BBType];
                            break;
                            
                            /* Imagens */
                            
                            case 'img':
                                value = prompt ("Digite a URL para a imagem:", "http://");
                                if (!value) value = '';
                                replaced = selected + BBCodes[BBType].replace('@', value);
                            break;
                        }
                        
                        /* Se o navegador for o Ruinternet Explorer */
                        
                        if (document.selection)
                        {
                            /* Se for selecionado o texto, substitui. Senão, acrescenta */
                            if (ie_selected.text)
                                ie_selected.text = replaced;
                            else
                                textarea.document = textarea.document + replaced;
                        }
                        
                        /* Se for FF/Chrome/Safari/etc, faz o que tem que fazer */
                                                    
                        else
                        {
                            textarea.value = textarea.document.substring(0, textarea.selectionStart) + replaced + textarea.document.substring(textarea.selectionEnd, textarea.document.length);                    
                        }        
                            
                    }
                    
                    /* Retorna o foco para textarea e encerra script */
                    
                    textarea.focus();
                    return false;
                });
            };
        
            $(document).ready(function() 
            {
                $.miniBB('exemplo', '.buttons');
            });
        
        </script>
    </head>
    <body onLoad="inicia();">
        <h1>Mini-editor BBCode jQuery</h1>
        <p>
            <a href="#b" class="buttons">[b]</a>
            <a href="#i" class="buttons">[i]</a>
            <a href="#u" class="buttons">[u]</a>
            <a href="#p" class="buttons">[p]</a>
            <a href="#h1" class="buttons">[h1]</a>
            <a href="#h2" class="buttons">[h2]</a>
            <a href="#h3" class="buttons">[h3]</a>
            <a href="#br" class="buttons">[br]</a>
            <a href="#hr" class="buttons">[hr]</a>
            <a href="#img" class="buttons">[img]</a>
            <a href="#url" class="buttons">[url]</a>
        </p>
        <p><iframe id="exemplo" width="600" height="280"></iframe></p>
        <p>por<br /><a href="http://zatec.us/ref=bbcode_tutorial"><img src="http://zatec.us/ads-sign.png" border="0" style="margin-top: 3px; width: 60px; height: 18px;" /></a></p>
    </body>
</html>

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...