Salvamento automático nos tópicos

Neste tutorial, vamos aprender a implantar uma ferramenta eficaz em
vossos fóruns, que faz com que você possa selecionar e salvar textos na
caixa de mensagens dos tópicos. Para isso siga os passos abaixo
atenciosamente.

--> Tutoriais, dicas e astúcias <--
Salvamento automático nos tópicos

1º - Conhecendo o código à ser utilizado:
Antes de mais nada, vamos ter conhecimento do código JavaScript à
ser utilizado para fazermos tal função. Para isso, devemos aceder à
página indicada no link abaixo, e selecionarmos o código que aparecerá:

Código:

function insertText(a){var
c=localStorage.getItem("fasave"+a);if(c===null){$("#savep
div[onClick^=insertText("+a+")]").remove()}else{if($("#savep
select").val()==1){localStorage.removeItem("fasave"+a),localStorage.removeItem("fasavet"+a),$("#savep
 div[onClick^=insertText("+a+")]").remove()}else{if($("#savep
select").val()==2){var
b=localStorage.getItem("fasavet"+a),b=prompt("Título do salvamento
:",b?b:"");b!==null&&(b==""?(localStorage.removeItem("fasavet"+a),$("#savep
 
div[onClick^=insertText("+a+")]").text('"'+c.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(c.length>30?"...":'"'))):(localStorage.setItem("fasavet"+a,b),$("#savep
 
div[onClick^=insertText("+a+")]").text(b)))}else{replaceTxt(c)}}}}function
 replaceTxt(a){var
c=$("#text_editor_textarea");if(c.length){start=c.attr("selectionStart");end=c.attr("selectionEnd");stop=c.attr("scrollTop");sleft=c.attr("scrollLeft");text=c.val();for(var
 
b=[""],e=/^([sS]*?)((($$)+)($?)|($))0([sS]*)$/,d;d=a.match(e);){b[b.length-1]+=d[1],d[6]=="$"||d[4]==""?b[b.length]="":b[b.length-1]+=d[3].substr(0,d[3].length/2)+"0",a=d[7]}b[b.length-1]=a;e=text.substring(start,end);a=b[0];d=a.length;for(var
 
f=1;f<b.length;f++){a+=e,a+=b[f]}c.attr({value:text.substr(0,start)+a+text.substr(end),selectionStart:start+d,selectionEnd:b.length>1?end+d:start+d,scrollTop:stop,scrollLeft:sleft})}}function
 saveExport(){for(var
a=localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length"),c="[",b=0;b<a;b++){var
 e=localStorage.getItem("fasave"+b);if(e!==null){var
d=localStorage.getItem("fasavet"+b);c!="["&&(c+=",");c+=(d===null?"":escape(d)+":")+escape(e)}}c+="]";replaceTxt(c)}function
 saveImport(){var
a=$("#text_editor_textarea").val().substring($("#text_editor_textarea").attr("selectionStart"),$("#text_editor_textarea").attr("selectionEnd")).replace(/s/g,"");if(/^[[%/^a-zA-Z0-9*@_+./:,-]*]$/.test(a)){for(var
 a=a.substr(1,a.length-2).split(","),c=0;c<a.length;c++){var
b=a[c].split(":");b.length==2?saveItem(unescape(b[1]),unescape(b[0])):saveItem(unescape(b[0]),"")}}}function
 saveSelect(){var
a=$("#text_editor_textarea");$(a).attr("selectionStart")-$(a).attr("selectionEnd")!=0&&(a=a.val().substring($(a).attr("selectionStart"),$(a).attr("selectionEnd")),saveItem(a,""))}function
 saveItem(a,c){for(var
b=parseInt(localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length")),e=0;e<b;e++){var
 
d=localStorage.getItem("fasave"+e);d!==null&&d==a&&(localStorage.removeItem("fasavet"+e),$("#savep
 
div[onClick^=insertText("+e+")]").remove(),localStorage.removeItem("fasave"+e))}localStorage.setItem("fasave"+b,a);c!=""&&localStorage.setItem("fasavet"+b,c);localStorage.setItem("fasave-length",b+1);$("#savep
 select").after('<div class="savedt"
onClick="insertText('+b+');return
false;">'+(c?c:"""+a.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(a.length>30?"...":"""))+"</div>")}$(function(){$("#text_editor_textarea").length&&window.localStorage&&navigator.appName!="Microsoft
 Internet Explorer"&&($("#addbbcode16").after(' <span
id="savec"><button id="saveb" class="button2" type="button"
title="Salvar"><img
src="http://i49.servimg.com/u/f49/15/59/73/38/save10.png" alt="Salvar"
title="Salvar"></button></span>'),$("#saveb").click(function(a){if(a.shiftKey){$("#saveshift").length||$("#savec").append('<div
 class="save-bloc" id="saveshift"><div
onClick="saveExport()">Exportar</div><div
onClick="saveImport()">Importar</div></div>'),$("#savep").hide(300),$("#saveshift").slideToggle(300)}else{if(!$("#savep").length){$("#savec").append('<div
 class="save-bloc" id="savep"><select><option
value="0">Inserir</option><option
value="1">Suprimir</option><option
value="2">Nomear</option></select><div id="saves"
style="display:none"><hr /><span
onClick="saveSelect()">Salvar a
seleção</span></div></div>');$("#savep").click(function(a){a.stopPropagation()});for(var
 
a=localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length"),c=0;c<a;c++){var
 b=localStorage.getItem("fasave"+c);b!==null&&$("#savep
select").after('<div class="savedt" onClick="insertText('+c+');return
 
false;">'+(localStorage.getItem("fasavet"+c)===null?"""+b.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(b.length>30?"...":"""):localStorage.getItem("fasavet"+c))+"</div>")}}$("#saveshift").hide(300);$("#savep").slideToggle(300)}}),$("#text_editor_textarea").select(function(){$("#saves").show()}),$("#text_editor_textarea").bind("click
 keyup
keydown",function(){$(this).attr("selectionStart")-$(this).attr("selectionEnd")==0&&$("#saves").hide()}))});

2º - Inserindo o código JavaScript:
Vamos agora aceder à gestão das páginas JavaScript para adicionarmos o nosso código:
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript
Depois carregue-se no botão "Criar um novo javascript".

Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;

Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna de perfis;

Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;

Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

3º - Inserindo o código CSS:
Para a personalização funcionar corretamente, você deverá adicionar
um código CSS na sua folha de estilos para que ela não apresente
problemas:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Onde terá de adicionar o seguinte código:

#savec
{ position:relative; }.save-bloc { dispay: none; color: #555!important;
cursor: point; z-index: 999; padding: 5px; border: 1px solid #BCBCBC;
background: #efefef url(https://2img.net/i/fa/prosilver/bg_button.gif)
repeat-x; display:none;top:20px;left:0px;position:absolute;
white-space:nowrap; }.save-bloc div:hover { color: #050505!important;
}.save-bloc div { cursor: pointer; }.save-bloc select { background:
#ccc; border: 1px solid #aaa; margin-bottom: 5px; }

3º - O resultado final:

Funções da Ferramenta

• Inserir
  O "Inserir" tem como função, inserir na ferramenta as seleções de
  textos ou imagens que você quer. Para isso é bem simples. Com o botão
  esquerdo do mouse apertado, passe-o sobre a palavra ou texto desejado,
  selecionando-o. Assim que o fizer, clique na ferramenta, selecione
  "inserir" e em "Salvar seleção". Pronto, seu texto já foi guardado. No
  caso de imagens, somente clique na mesma e novamente salve.
  
  
  
  
• Suprimir
  O "Suprimir" tem como função, retirar os salvamentos que você
  selecionou no passo anterior na ferramenta de salvamentos. Para isso é
  simples,com o "suprimir" selecionado na ferramenta, simplesmente clique
  sobre o salvamento desejado para que o mesmo seja retirado.
  
  
  
  
• Nomear
  O "Nomear" tem como função, dar títulos aos seus salvamentos, assim
  personalizando-os. Para fazer tal modificação, na ferramenta de
  salvamentos, selecione "nomear". Logo após clique no salvamento desejado
  ao qual irá personalizar. Aparecerá um alerta em sua página, pedindo
  para adicionar o título desejado: "Título do salvamento:".
  
  
  
  
  Expandir esta imagem Ver em tamanho real
  

--> FAQ <--
Salvamento automático nos tópicos

• Posso adicionar quantos salvamentos quiser?
  Sim, não há um limite exato para que seja impedido o adicionar de
  novos salvamentos, somente tome cuidado para não sobrecarregar a
  ferramenta, e por isso mesmo, o próprio fórum.
  

Obrigado Por compartilhar esse tutorial

É que estou aqui para ajudar!