(Resolvido) Botão tipo QUOTE

Rafael Spilki · Maio 30, 2009

Daí galera! Tudo numa boa?

Sabe esse botão aqui de cima que inclui a tag quote nesse textarea, pois é... como se faz isso? Queria algo exatamente igual, só que pra outras tags...

Enchi o saco de usar editores prontos... fiz o meu próprio... só que tipo, pra negritar o texto o user tem que digitar:

[negrito]texto[/negrito]

Sacaram? Queria um botão que fizesse isso automaticamente! Detalhe, se o user selecionar o texto, abraçar o texto com a tag, já se não selecionar texto nenhum simplesmente lançar as tags na taextarea para futura digitação... tipo, algo como: [negrito][/negrito]

Também preciso um botão que apenas inclua a tag: [quebra], sem abraçar nada... apenas incluí-la onde estiver o cursor...

Seria o equivalente aos enters... preferi desse forma porque substituir o caracter não tava rolando da forma que eu queria... assim ficou belezinha, mas agora queria criar esses dois botões...

Alguém sabe qual caminho devo seguir aqui? Alguma sugestão?

[]'s Rafael Spilki

Jonathan Queiroz · Maio 30, 2009

E aí, Rafael !

Tudo bem com você, cara ?

Você pode fazer assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function InsereCodigo(valor,tag_fechamento){
        var textarea=document.getElementById("codigo")
        var inicio_selecao=textarea.selectionStart
        var valor_inicial=textarea.value
        var fim_selecao=tag_fechamento?textarea.selectionEnd:valor_inicial.length
        textarea.value=valor_inicial.substring(0,inicio_selecao)+valor+valor_inicial.substring(inicio_selecao,fim_selecao)
        if(tag_fechamento){
            textarea.value+=valor.replace("[","[/")+valor_inicial.substring(fim_selecao,valor_inicial.length)
        }
        //dá novamente o foco ao textarea
        textarea.focus()
        textarea.selectionStart=inicio_selecao+valor.length
        textarea.selectionEnd=(tag_fechamento)?(fim_selecao+valor.length):(inicio_selecao)
    }
    function InsereQuote(){
        InsereCodigo("[quote]",true)
    }
    function InsereLinha(){
        InsereCodigo("[quebra]")
    }
    </script>
</head>
<body>
<textarea id="codigo">
[...]
</textarea>
<div id="Painel">
<input type="button" id="quote" onclick="InsereQuote()" value="Quote" />
<input type="button" id="quebra" onclick="InsereLinha()" value="Quebra" />
</div>
</body>
</html>

Quanto ao problema na hora de quebrar linhas, o código é em ASP ? Se for, você pode tentar assim:

codigo=replace(codigo,vbcrlf,"<br>")

Um abraço !

Rafael Spilki · Junho 1, 2009

Falça John! Tranquilo?

Cara, quanto aos espaçamentos entre linha não é esse o problema, véio, quando subo pro BD lá no datacenter, independente da quantidade de enter que eu de fica tudo junto... (local isso não ocorre) já tentei de tudo no asp e há unica forma que rolou foi colocando algum marcador pra substituir no replace... poderia usar varios, até mesmo o <br>, mas como a maioria dos usuários são leigos fica mais claro pra eles algo como [quebra]...

Bom, quanto ao código que você me mandou acima funcionou perfeitinho no FF, perfeito mesmo, no entando no IE6 e 7 não rolou... nestes, as tags são sempre acrescentadas no início do textarea e não onde está o cursor ou abraçando o texto, saca?

Tens alguma ideia do porque isso ocorre? dei uma olhadinha ali e não achei o motivo...

Cara... obrigado pela ajuda!

[]'s Rafael Spilki

Jonathan Queiroz · Junho 4, 2009

Estava olhando aqui e o selectionStart e selectionEnd não funciona no IE

Achei algo nesse link: http://stackoverflow.com/questions/235411/...rt-and-selectio

Quando terminar de fazer as modificações posto aqui

Obs.:

Também estou desenvolvendo um script parecido

Aprimorei um pouco o código

Jonathan Queiroz · Junho 9, 2009

Consegui acertar o script aqui !

O código ficou assim:

function getSelection(inputBox) {
        if ("selectionStart" in inputBox) {
            return {
                start: inputBox.selectionStart,
                end: inputBox.selectionEnd
            }
        }
        //and now, the blinkered IE way
        var bookmark = document.selection.createRange().getBookmark()
        var selection = inputBox.createTextRange()
        selection.moveToBookmark(bookmark)

        var before = inputBox.createTextRange()
        before.collapse(true)
        before.setEndPoint("EndToStart", selection)

        var beforeLength = before.text.length
        var selLength = selection.text.length

        return {
            start: beforeLength,
            end: beforeLength + selLength
        }
}

function InsereCodigo(valor,tag_fechamento,tipo,minvalue,maxvalue){
    var ie=navigator.appName.indexOf("Internet Explorer")>0
    var textarea=document.getElementById("mensagem")
    var t=getSelection(textarea)
    var valor_inicial=textarea.value
    var soma=(ie?(t.start>1?2:0):0)
    t.start+=soma
    var tamanho_selecionado = t.end-t.start
    var inicio_selecao=t.start
    var fim_selecao=(tag_fechamento?t.end+soma:valor_inicial.length)
    var valor2=""
    if(tipo!=null){
        valor2="="
        var vn
        do{
            vn=prompt(tipo)
        }while((minvalue && maxvalue) && (vn>maxvalue || vn<minvalue))
        valor2+=vn
    }
    textarea.value=""
    textarea.value=valor_inicial.substring(0,inicio_selecao)+"["+valor+valor2+"]"+valor_inicial.substring(inicio_selecao,fim_selecao)
    if(tag_fechamento){
        textarea.value+="[/"+valor+"]"
        textarea.value+=valor_inicial.substring(fim_selecao,textarea.length)
    }
    //dá novamente o foco ao textarea
    textarea.focus()
    textarea.selectionStart=inicio_selecao+valor.length+valor2.length+2
    textarea.selectionEnd=textarea.selectionStart+tamanho_selecionado
}
onload=function(){
    //Negrito
    var btnNegrito=document.getElementById("InsereNegrito")
    btnNegrito.onclick=function(){
        InsereCodigo("b",true)
    }
    //Itálico
    var btnItalico=document.getElementById("InsereItalico")
    btnItalico.onclick=function(){
        InsereCodigo("i",true)
    }
    //Sublinhado
    var btnSublinhado=document.getElementById("InsereSublinhado")
    btnSublinhado.onclick=function(){
        InsereCodigo("u",true)
    }
    //Riscado
    var btnRiscado=document.getElementById("InsereRiscado")
    btnRiscado.onclick=function(){
        InsereCodigo("s",true)
    }
    //Overline
    var btnOverline=document.getElementById("InsereOverline")
    btnOverline.onclick=function(){
        InsereCodigo("overline",true)
    }
    //Sobrescrito
    var btnSobrescrito=document.getElementById("InsereSobrescrito")
    btnSobrescrito.onclick=function(){
        InsereCodigo("sobrescrito",true)
    }
    //Subscrito
    var btnSubscrito=document.getElementById("InsereSubscrito")
    btnSubscrito.onclick=function(){
        InsereCodigo("subscrito",true)
    }
    //Pré-formatação
    var btnPre=document.getElementById("InserePre")
    btnPre.onclick=function(){
        InsereCodigo("pre",true)
    }
    //Inserir imagem
    var btnImagem=document.getElementById("InsereImagem")
    btnImagem.onclick=function(){
        InsereCodigo("img",false,"Digite uma imagem")
    }
    //Inserir usuário
    var btnUser=document.getElementById("InsereUser")
    btnUser.onclick=function(){
        InsereCodigo("user",true,"Digite o nome do usuário")
    }
    //Inserir e-mail
    var btnMail=document.getElementById("InsereMail")
    btnMail.onclick=function(){
        InsereCodigo("email",true,"Digite o e-mail")
    }
    //Modificar tamanho
    var btnSize=document.getElementById("InsereSize")
    btnSize.onclick=function(){
        InsereCodigo("size",true,"Tamanho da letra (1 a 7)",1,7)
    }
    //Link's
    var btnUrl=document.getElementById("InsereUrl")
    btnUrl.onclick=function(){
        InsereCodigo("url",true,"Digite a página desejada")
    }
    //Comentários
    var btnComentario=document.getElementById("InsereComentario")
    btnComentario.onclick=function(){
        InsereCodigo("comment",true)
    }
    //Lista
    var btnLista=document.getElementById("InsereLista")
    btnLista.onclick=function(){
        InsereCodigo("list",true)
    }
    //Marcador
    var btnMarcador=document.getElementById("InsereMarcador")
    btnMarcador.onclick=function(){
        InsereCodigo("*",false)
    }
    //Tabela
    var btnTabela=document.getElementById("InsereTabela")
    btnTabela.onclick=function(){
        InsereCodigo("table",true)
    }
    //Thead
    var btnTHead=document.getElementById("InsereTHead")
    btnTHead.onclick=function(){
        InsereCodigo("thead",true)
    }
    //Tbody
    var btnTbody=document.getElementById("InsereTBody")
    btnTbody.onclick=function(){
        InsereCodigo("tbody",true)
    }
    //Linha
    var btnLinha=document.getElementById("InsereLinha")
    btnLinha.onclick=function(){
        InsereCodigo("tr",true)
    }
    //Coluna
    var btnColuna=document.getElementById("InsereColuna")
    btnColuna.onclick=function(){
        InsereCodigo("td",true)
    }
    //Quote
    var btnQuote=document.getElementById("InsereQuote")
    btnQuote.onclick=function(){
        InsereCodigo("quote",true)
    }
    //Code
    var btnCode=document.getElementById("InsereCode")
    btnCode.onclick=function(){
        InsereCodigo("code",true)
    }
    //ASP
    var btnASP=document.getElementById("InsereASP")
    btnASP.onclick=function(){
        InsereCodigo("asp",true)
    }
}

Obs.:

Implementei algumas coisas no código. Agora é possível inserir tag's que solicitem um valor ao usuário (ficará após o sinal de "="), como a url, img, etc.

Obs.:

O primeiro parâmetro continua indicando a tag que deverá ser adcionada

O segundo indica se a tag deverá ser fechada

O terceiro indica o que o sistema irá perguntar ao usuário para inserir valores na tag (deixe em branco se a tag não necessita de valores)

.Andreia. · Junho 9, 2009

Legal Jonathan, você podia colocar nos scripts prontos tb hein :D

Rafael Spilki · Junho 10, 2009

Bah cara, valeu a força! denovo! mas pior que pra mim não rolou... será que fui eu quem errou alguma coisa por aqui?

no IE7 acontecem vários sintomas diferentes que mudam conforme a posição do cursor, ex.: se digito teste(aqui clico em quote) acontece isso: teste(quote)(/quote)teste

se seleciono a palvra teste e clico em quote acontece isso: teste(quote)(/quote) e por aí vai...

obs.: substituí [ por ( para facilitar a digitação aqui do post... ;)

No FF tb notei alguns problemas parecidos:

se seleciona a palavra teste e clico em quote fica assim: (quote)teste(/quote)teste

Se digito teste(aqui clico em quote) fica assim: teste(quote)(/quote)teste e por aí vai...

No IE6 e Crhome não testei...

Editado Junho 10, 2009 por Rafael Spilki

Jonathan Queiroz · Junho 13, 2009

Achei o erro. É porque eu procurava uma string em um intervalo pré-definido do valor do textarea (textarea.value), mas esse intervalo era referente à variável valor_inicial, que armazenada o valor do textarea antes de ser modificado.

O código está assim:

function getSelection(inputBox) {
		if ("selectionStart" in inputBox) {
			return {
				start: inputBox.selectionStart,
				end: inputBox.selectionEnd
			}
		}
		//and now, the blinkered IE way
		var bookmark = document.selection.createRange().getBookmark()
		var selection = inputBox.createTextRange()
		selection.moveToBookmark(bookmark)

		var before = inputBox.createTextRange()
		before.collapse(true)
		before.setEndPoint("EndToStart", selection)

		var beforeLength = before.text.length
		var selLength = selection.text.length

		return {
			start: beforeLength,
			end: beforeLength + selLength
		}
}

function InsereCodigo(valor,tag_fechamento,tipo,minvalue,maxvalue){
	var ie=navigator.appName.indexOf("Internet Explorer")>0
	var textarea=document.getElementById("mensagem")
	var t=getSelection(textarea)
	var valor_inicial=textarea.value
	var soma=(ie?(t.start>1?2:0):0)
	t.start+=soma
	var tamanho_selecionado = t.end-t.start
	var inicio_selecao=t.start
	var fim_selecao=(tag_fechamento?t.end+soma:valor_inicial.length)
	var valor2=""
	if(tipo!=null){
		valor2="="
		var vn
		do{
			vn=prompt(tipo)
		}while((minvalue && maxvalue) && (vn>maxvalue || vn<minvalue))
		valor2+=vn
	}
	textarea.value=""
	textarea.value=valor_inicial.substring(0,inicio_selecao)+"["+valor+valor2+"]"+valor_inicial.substring(inicio_selecao,fim_selecao)
	if(tag_fechamento){
		textarea.value+="[/"+valor+"]"
		textarea.value+=valor_inicial.substring(fim_selecao,valor_inicial.length)
	}
	//dá novamente o foco ao textarea
	textarea.focus()
	textarea.selectionStart=inicio_selecao+valor.length+valor2.length+2
	textarea.selectionEnd=textarea.selectionStart+tamanho_selecionado
}
onload=function(){
	//Negrito
	CreateTag("InsereNegrito","b",true)
	//Itálico
	CreateTag("InsereItalico","i",true)
	//Sublinhado
	CreateTag("InsereSublinhado","u",true)
	//Riscado
	CreateTag("InsereRiscado","s",true)
	//Overline
	CreateTag("InsereOverline","overline",true)
	//Sobrescrito
	CreateTag("InsereSobrescrito","sobrescrito",true)
	//Subscrito
	CreateTag("InsereSubscrito","subscrito",true)
	//Pré-formatação
	CreateTag("InserePre","pre",true)
	//Inserir imagem
	CreateTag("InsereImagem","img",false,"Digite uma imagem")
	//Inserir usuário
	CreateTag("InsereUser",true,"Digite o nome do usuário")
	//Inserir e-mail
	CreateTag("InsereMail",true,"Digite o e-mail")
	//Modificar tamanho
	CreateTag("InsereSize","size",true,"Tamanho da letra (1 a 7)",1,7)
	//Link's
	CreateTag("InsereURL","url",true,"Digite a página desejada")
	//Comentários
	CreateTag("InsereComentario","comment",true)
	//Lista
	CreateTag("InsereLista","list",true)
	//Marcador
	CreateTag("InsereMarcador","*",false)
	//Tabela
	CreateTag("InsereTabela","table",true)
	//Thead
	CreateTag("InsereTHead","thead",true)
	//Tbody
	CreateTag("InsereTBody","tbody",true)
	//Linha
	CreateTag("InsereLinha","tr",true)
	//Coluna
	CreateTag("InsereColuna","td",true)
	//Quote
	CreateTag("InsereQuote","quote",true)
	//Code
	CreateTag("InsereCode","code",true)
	//ASP
	CreateTag("InsereASP","asp",true)
}
function CreateTag(id,v1,v2,v3,v4,v5){
	var el=document.getElementById(id)
	if(el){
		el.onclick=function(){
			InsereCodigo(v1,v2,v3,v4,v5)
		}
	}
}[/codebox]

Obs.:

Padronizei um pouco o script com a função "CreateTag"

É porque usarei esse script em mais de um fórum e algumas dessas funções serão desnecessárias num dos fóruns. O arquivo do BBCode (feito em ASP.NET VB) e o javascript serão o mesmo, deixando que o script seja utilizado, mas não é necessário inserir essa opção no painel de edição. Assim, se a função não encontrar o elemento não retornará nenhum erro ao navegador.

Ao utilizar a função, o primeiro parâmetro é o id do elemento e os outros cinco serão repassados à função InsereCodigo

Ainda não pude testar no IE6 e IE7 porque estou utilizando o Windows 7 e vem com o IE8. Estou instalando um programa (IETester) que permite testar aplicações desde o IE 5.5 até o IE8

Se funcionar, postarei no repositório de scripts

Rafael Spilki · Junho 19, 2009

Grande John, cara desculpa a demora!

To sem tempo nenhum... mas pretendo testar esse final de semana... Pode deixar que testo aqui nos outros IE's e afins...

[]'s

Editado Junho 19, 2009 por Rafael Spilki

Jonathan Queiroz · Junho 19, 2009

Consegui testar no IE, mas não funcionou

Fiz algumas modificações, mas ainda não está muito bom no IE...

Jonathan Queiroz · Junho 19, 2009

Consegui fazer o código funcionar !

Achei uma forma alternativa para inserir as tag's no IE

Código:

/*
Editor de texto criado por Jonathan Coutinho Luz de Queiroz
Usuário: http://scriptbrasil.com.br/forum/index.php?showuser=37857
Tópico: http://scriptbrasil.com.br/forum/index.php?showtopic=138499
*/
function getSelection(inputBox) {
        /*Se possuir as propriedades selectionStart e selectionEnd, retorna
        o valor das mesmas
        */
        if ("selectionStart" in inputBox) {
            return{
                start: inputBox.selectionStart,
                end: inputBox.selectionEnd
            }
        }
        //Se não, retorna "false"
        return false
}
function InsereCodigo(valor,tag_fechamento,tipo,minvalue,maxvalue){
    var textarea=document.getElementById("mensagem")
    var t=getSelection(textarea)
    var valor2=""
    if(tipo!=null){
        valor2="="
        var vn
        do{
            vn=prompt(tipo)
        }while((minvalue && maxvalue) && (vn>maxvalue || vn<minvalue))
        valor2+=vn
    }
    //Navegadores sem suporte a selectionStart ou selecionEnd
    if(t==false){
        //IE
        textarea.focus()
        var y=document.selection.createRange().text
        y="["+valor+valor2+"]"+y+(tag_fechamento?"[/"+valor+"]":"")
        document.selection.createRange().text=y
        return
    }
    //Outros navegadores
    var valor_inicial=textarea.value
    var tamanho_selecionado = t.end-t.start
    var inicio_selecao=t.start
    var fim_selecao=(tag_fechamento?t.end:valor_inicial.length)
    textarea.value=""
    textarea.value=valor_inicial.substring(0,inicio_selecao)
    textarea.value+="["+valor+valor2+"]"
    textarea.value+=valor_inicial.substring(inicio_selecao,fim_selecao)
    if(tag_fechamento){
        textarea.value+="[/"+valor+"]"
        textarea.value+=valor_inicial.substring(fim_selecao,valor_inicial.length)
    }
    //dá novamente o foco ao textarea
    textarea.focus()
    textarea.selectionStart=inicio_selecao+valor.length+valor2.length+2
    textarea.selectionEnd=textarea.selectionStart+tamanho_selecionado
}
onload=function(){
    //Negrito
    CreateTag("InsereNegrito","b",true)
    //Itálico
    CreateTag("InsereItalico","i",true)
    //Sublinhado
    CreateTag("InsereSublinhado","u",true)
    //Riscado
    CreateTag("InsereRiscado","s",true)
    //Overline
    CreateTag("InsereOverline","overline",true)
    //Sobrescrito
    CreateTag("InsereSobrescrito","sobrescrito",true)
    //Subscrito
    CreateTag("InsereSubscrito","subscrito",true)
    //Pré-formatação
    CreateTag("InserePre","pre",true)
    //Inserir imagem
    CreateTag("InsereImagem","img",false,"Digite uma imagem")
    //Inserir usuário
    CreateTag("InsereUser",true,"Digite o nome do usuário")
    //Inserir e-mail
    CreateTag("InsereMail",true,"Digite o e-mail")
    //Modificar tamanho
    CreateTag("InsereSize","size",true,"Tamanho da letra (1 a 7)",1,7)
    //Link's
    CreateTag("InsereURL","url",true,"Digite a página desejada")
    //Comentários
    CreateTag("InsereComentario","comment",true)
    //Lista
    CreateTag("InsereLista","list",true)
    //Marcador
    CreateTag("InsereMarcador","*",false)
    //Tabela
    CreateTag("InsereTabela","table",true)
    //Thead
    CreateTag("InsereTHead","thead",true)
    //Tbody
    CreateTag("InsereTBody","tbody",true)
    //Linha
    CreateTag("InsereLinha","tr",true)
    //Coluna
    CreateTag("InsereColuna","td",true)
    //Quote
    CreateTag("InsereQuote","quote",true)
    //Code
    CreateTag("InsereCode","code",true)
    //ASP
    CreateTag("InsereASP","asp",true)
}
function CreateTag(id,v1,v2,v3,v4,v5){
    var el=document.getElementById(id)
    if(el){
        el.onclick=function(){
            InsereCodigo(v1,v2,v3,v4,v5)
        }
    }
}
/*
    ---- Como adcionar tag's ----
    Para adcionar tag's ao editor, utilize a função CreateTag.
    Apenas os dois primeiros parâmetros são obrigatórios.
    1. O primeiro parâmetro da função indica o id do elemento HTML que 
        será utilizado pelo usuário para inserir a tag.
    2. O segundo parâmetro indica o nome da tag (ex.: "quote", 
        "table", etc.)
    3. O terceiro parâmetro indica se a tag deverá ser fechada
    4. Caso haja um quato parâmetro, o usuário será indagado
        sobre o valor da tag (código após o "=")
        4.1 Se não houver esse parâmetro, subentende-se que a tag
            não necessita de nenhum valor
    5. O quinto e sexto parâmetro indica o valor máximo
        que será aceito na pergunta do quarto parâmetro
        5.1 Se não houverem esses parâmetros, será aceito qualquer
            valor (inclusive texto)
*/[/codebox]

Vou postar também no repositório de scripts

Tópico no repositório de scripts: Editor de textos para fóruns (inclui exemplo de utilização)

Rafael Spilki · Junho 20, 2009

Ficou ótimo Jonh... Muito bom mesmo!

O legal é a praticidade do troço, saca? Era isso que eu queria... tipo, no meu caso vou usar no máximo 5 botões... fica extremamente fácil de tirar e colocar novas tags...

O bacana é que como o meu user não sabe nada de programação eu troquei (b )(/b) por (negrito) (/negrito), para dar mais familiaridade a coisa toda...

Acima () = [] para facilitar digitação...

Enfim, ficou excelente...parabéns e muito, muito obrigado!

Forte abraço!

Editado Junho 20, 2009 por Rafael Spilki

Jonathan Queiroz · Junho 20, 2009

Opa !

Vou marcar o tópico como Resolvido então

Precisando de alguma coisa é só postar !

Entrar

(Resolvido) Botão tipo QUOTE

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns