Editor no estilo IPS

Nome do Arquivo: Editor no estilo IPS
Autor: DeeW. e uma pequena parte do JScript.
Funcionalidade: PunBB
Categoria: Recursos BestSkins

Aprenda a colocar o editor no estilo IPS apenas por CSS!

Painel de administração > Visualização > Cores > Folha de estilo CSS e adicione:

Código:


  .sceditor-button-emoticon div {
        background: url(http://2img.net/i/fa/i/smiles/icon_smile.gif)!important;
        background-repeat: no-repeat!important
    }

    .sceditor-button-dailymotion div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/dailymotion.png)!important
    }

    .sceditor-button-flash div {
        background: url(http://2img.net/i/fa/wysiwyg/page_white_flash.png)!important
    }

    .sceditor-button-servimg div {
        background: url(http://2img.net/i/fa/wysiwyg/picture_save.png)!important
    }

    .sceditor-button-faspoiler div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/faspoiler.png)!important
    }

    .sceditor-button-fahide div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/fahide.png)!important
    }

    .sceditor-button-fascroll div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/scroll.png)!important
    }

    .sceditor-button-faupdown div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/updown.png)!important
    }

    .sceditor-button-fawow div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/wow.png)!important
    }

    .sceditor-button-farand div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/rand.png)!important
    }

    .sceditor-button-faroll div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/roll.png)!important
    }

    .sceditor-button-more div {
        background: url(http://2img.net/i/rs3/85/frm/SCEditor/src/themes/icons/src/famfamfam/dotdotdot.png)!important
    }

    .sceditor-button.sceditor-button-font {
        background: url(http://i55.servimg.com/u/f55/18/17/62/92/fonte10.png) repeat scroll 0 0 rgba(0,0,0,0)!important;
        height: 18px;
        width: 77px
    }

    .sceditor-button.sceditor-button-font > div {
        display: none!important
    }

    .sceditor-button.sceditor-button-size {
        background: url(http://i55.servimg.com/u/f55/18/17/62/92/size10.png) no-repeat scroll 0 0 rgba(0,0,0,0)!important;
        height: 18px;
        width: 57px
    }

    .sceditor-button.sceditor-button-size > div {
        display: none!important
    }

    .sceditor-button.sceditor-button-color {
        margin-left: 5px!important;
        margin-right: 5px!important
    }

    #text_editor_controls {
        display: !important
    }

    .sceditor-container.ltr {
        background-color: #E4EBF2!important;
        border: 2px solid #D5DDE5!important;
        border-radius: 0!important;
        height: 200px;
        padding: 0 5px 21px 3px;
        width: auto!important
    }

    .sceditor-container iframe,.sceditor-container textarea {
        background: none repeat scroll 0 0 #FFF!important;
        border-color: #BBB #DDD #DDD #BBB !important;
        border-style: solid!important;
        border-width: 1px!important;
        height: 200px!important;
        margin: 0!important;
        width: 100%!important
    }

    #text_editor_textarea,#textarea_content iframe#text_editor_iframe {
        height: 200px!important;
        width: 100%!important
    }

    div.sceditor-group {
        background: none repeat scroll 0 0 rgba(0,0,0,0)!important;
        border-bottom: medium none!important;
        margin: 1px 5px 1px 0;
        padding: 1px
    }

    div.sceditor-toolbar {
        background: none repeat scroll 0 0 padding-box #E4EBF2!important;
        border-bottom-width: 0!important;
        padding: 3px 5px 2px!important
    }

    #smiley-box iframe {
        height: 230px
    }

    #smilies_categ {
        padding: 0
    }

    #smiley-box {
        border: 1px solid #DDD;
        display: none!important;
        margin: 5px 0!important;
        padding: 5px
    }

    #textarea_content dt {
        display: none
    }

    #textarea_content {
        width: 98%!important
    }
.sceditor-button:hover {
    background: #D5DDE5!important;
    box-shadow: none!important;
}
.sceditor-button:active,.sceditor-button .active{
background-color: #F0F0F0!important;
border: 1px solid #BBB!important;
opacity: 1!important;
padding: 2px 4px!important;
}
.sceditor-button .active:focus{
background-color: #86CAFF !important;
}


Não está totalmente igual, estou tentando deixar o máximo de igualdade! '

Show Lek. Eu curti muito reputado.
 

[sucesso=Tutorial Aceito][/sucesso]

Muito bom..

Isso me fez lembrar de um código que comecei a fazer kkkkk, mas parei.. Mas ta aqui ainda x.x

É aquela função auto save do IPB, conhece? Talvez em breve retomo o desenvolvimento..

Aquele "Saving Post..." ? se refere a este?

Isso... To salvando em localstorage, para evitar por exemplo de o usuário estar ali digitando e por algum motivo fechar a aba e perder o texto, ao voltar o texto é recuperado...

Mas quero fazer algo bem bacana e completo.. hehe

Olá!


Ficou bem bacana, ótimo código.

O mesmo funciona no Invision com a alteração de templates ou o código precisa ser diferente?

Galileu escreveu:O mesmo funciona no Invision com a alteração de templates ou o código precisa ser diferente?

É pra funcionar, é apenas CSS.

Galileu escreveu:O mesmo funciona no Invision com a alteração de templates ou o código precisa ser diferente?

É só adicionar ao CSS!

Que bisonho que eu sou, haha. Nem notei isso...

Muito show, ficaria melhor se conseguir colocar a parada de upar Imagem assim como o daqui do BS.
Vlw

waghcwb escreveu:Isso... To salvando em localstorage, para evitar por exemplo de o usuário estar ali digitando e por algum motivo fechar a aba e perder o texto, ao voltar o texto é recuperado...

Mas quero fazer algo bem bacana e completo.. hehe

Opa, isso vai ser interessante amigo! hehe
Eu estava pra desenvolver um código de Editar o tópico sem sair da página, acho que estarei a utilizar este CSS !
Muito bom DeeW !

show!! memso
gostei parabens pelo codigo