Editor de texto para fóruns

[Jonathan Queiroz]

Código do editor:

/*
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)
*/

Exemplo de utilização:

<html> 
<head> 
    <title>Editor de Textos por Jonathan Queiroz</title> 
    <script type='text/javascript' src='edicao.js'></script> 
</head> 
<body> 
<h1>Editor de Textos</h1> 
<form id='frmAct' action='/forum/modificar-topico2.aspx' method='post'> 
<input type='hidden' name='id' value='1'> 
<fieldset> 
<legend>Modificar tópico</legend> 
<div id='painel_edicao' style='border-style:double'> 
    <input type='button' id='InsereNegrito' value='B' title='Negrito'> 
    <input type='button' id='InsereItalico' value='I' title='Itálico'> 
    <input type='button' id='InsereSublinhado' value='U' title='Sublinhado'> 
    <input type='button' id='InsereRiscado' value='S' title='Riscado'> 
    <input type='button' id='InsereSobrescrito' value='Sobrescrito' title='Sobrescrito'> 
    <input type='button' id='InsereSubscrito' value='Subscrito' title='Subscrito'> 
    <input type='button' id='InsereOverline' value='OverLine' title='Overline'> 
    <input type='button' id='InserePre' value='pre' title='Pré-formatado'> 
    <input type='button' id='InsereImagem' value='Imagem' title='Imagem'> 
    <input type='button' id='InsereUser' value='User' title='Link para usuário'> 
    <input type='button' id='InsereMail' value='E-mail' title='E-mail'> 
    <input type='button' id='InsereSize' value='Size' title='Tamanho da fonte'> 
    <input type='button' id='InsereUrl' value='URL' title='Link'> 
    <input type='button' id='InsereComentario' value='Comentário' title='Comentário'> 
    <input type='button' id='InsereLista' value='Lista' title='Lista'> 
    <input type='button' id='InsereMarcador' value='Marcador' title='Marcador'> 
    <input type='button' id='InsereTabela' value='Tabela' title='Tabela'> 
    <input type='button' id='InsereTHead' value='Table Head' title='Cabeçalho da tabela (opcional)'> 
    <input type='button' id='InsereTBody' value='Table Body' title='Corpo da tabela (opcional)'> 
    <input type='button' id='InsereLinha' value='Linha' title='Linha de tabela'> 
    <input type='button' id='InsereColuna' value='Coluna' title='Coluna de tabela'> 
    <input type='button' id='InsereQuote' value='Citar' title='Citação (quote)'> 
    <input type='button' id='InsereCode' value='Código' title='Código geral'> 
    <input type='button' id='InsereASP' value='ASP' title='Código ASP'> 
</div> 
<textarea name='mensagem' id='mensagem'>Digite sua mensagem aqui !</textarea> 
</fieldset> 

<a href="http://scriptbrasil.com.br/forum/index.php?showuser=37857" target="_blank">Jonathan Coutinho Luz de Queiroz</a> 
</body> 
</html>

[Anderson Ferreira]

Olá Jhonatan,

Parabéns pelo Script, más ...

Ele é feito em que?! Java Script? jQuery? Ajax?

Obrigado,

Anderson Ferreira

[Jonathan Queiroz]

Valeu. O script foi feito em Javascript puro, sem necessidade de frameworks.

[Anderson Ferreira]

Parabéns novamente Jonathan ~ O melhor moderador do Script Brasil \o/

Existe inúmeros destes scripts pela internet, mas com certeza este foi o melhor que já vi. Isto porque, é totalmente com tags em Português, e comentários explicando toda a utilização do código ...

Pode ter certeza, se algum dia for necessário eu utilizar ele, os créditos serão incluídos (e aconselho a todos também a fazer isto, por ser a maneira mínima de agradecer todo o trabalho q ele teve no desenvolvimento do script).

Abraços,

Anderson Ferreira

[Rafael Laurindo]

É monitor, véio. Rs, abraços.