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
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
174 usuários online :: 8 usuários cadastrados, 1 Invisível e 165 Visitantes :: 2 Motores de busca

[K]oke, Br_SP_Rodrigo, Brenojs, Claudio Arthur, Claudio Renan Farias, Heikki, Neji, Rafakimura

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

[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 Ter 2 Maio 2017 - 17:37

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 : 23/04/2016
Mensagens : 2467
Pontos Ativos : 3317

http://1forum1.forumeiros.com/

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