Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» [Pedido] Banner ®
Hoje à(s) 04:46 pm por mocci

» [PEDIDO] Brasão de Armas
Hoje à(s) 04:17 pm por mocci

» Mudar caixas de usuários online, grupos e aniversariantes
Hoje à(s) 04:16 pm por Kyo Panda

» Construção de Header
Hoje à(s) 04:04 pm por IsmaelS.

» Bug inicial do forum
Hoje à(s) 03:53 pm por Kyo Panda

» Duvidas referente ao sistema pontos
Hoje à(s) 03:50 pm por Kyo Panda

» [Pedido] Ranks
Hoje à(s) 03:16 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
316 usuários online :: 14 usuários cadastrados, Nenhum Invisível e 302 Visitantes :: 2 Motores de busca

Czins, GSCode, Hastad, iScroll, IsmaelS., Jefferson105, Ketholy123, Kyo Panda, Lily Vendramini, luan2, mocci, odelgado, ShadowPrince, William_iHarDz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

[TUTORIAL] Melhoria da tag "code" no SCEditor

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Melhoria da tag "code" no SCEditor

Mensagem por Luiz em 02/05/17, 01:37 pm

Melhoria da tag "code" no SCEditor
O tutorial a seguir irá melhorar o botão "code" do SCEditor, criando um pequeno dropdown ao clicar no botão, para que o código possa ser inserido corretamente no editor.

Melhoria da tag "code" no SCEditor
TUTORIAIS, DICAS E ASTÚCIAS

Instalação do código Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript

Seta Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta Investimento - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Feito isso, adicione o código Javascript:
Código:
/**
 * Melhorar o botão CODE no SCEditor.
 *
 * @author: Luiz~
 * @see: <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence: MIT
 */
(function ($) {
  'use strict';
 
  $(window).on('load', function () {
 
    $('.sceditor-button-code').css('display', 'none');
    var $faCode = $([
      '<a class="sceditor-button sceditor-button-c0de" data-sceditor-command="fa-code" ' +
      '  unselectable="on" title="Code">',
      '  <div unselectable="on" style="background-position: 0 -544px; filter: none!important; ' +
      '  opacity: 1!important;">Code</div>',
      '</a>',
    ].join('\n'))
      .on('click', function () {
        $('.sceditor-fa-code-drop')
          .css({
            left: $faCode.offset().left + 'px',
            top: $faCode.offset().top + 'px'
          })
            .toggle();
      })
        .insertAfter('.sceditor-button-code')
    ;
 
    $([
      '<div class="sceditor-dropdown sceditor-fa-code-drop">',
      '  <div>',
      '    <label for="txt" unselectable="on">Cole o código:</label>',
      '    <textarea id="fa-code-content" value="" cols="20" rows="7" ' +
      '    style="min-width: 160px; width: 160px;"></textarea>',
      '  </div>',
      '  <div>',
      '    <input type="button" class="button" id="fa-code-btn" value="Inserir código">',
      '  </div>',
      '</div>',
    ].join('\n'))
      .css({
        marginTop: '28px',
        display: 'none'
      })
        .appendTo('body')
    ;
 
    var $sceditor = $("#text_editor_textarea");
    $('#fa-code-btn').on('click', function () {
      $sceditor
        .sceditor('instance')
          .insertText('[code]' + $('#fa-code-content').val() + '[/code]')
      ;
      $('.sceditor-fa-code-drop').toggle();
      $('#fa-code-content').val('');
    });
  }); 
}(jQuery));

  • Resultado do tutorial:


avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3766
Pontos Ativos : 4449

https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum