[Tutorial] Contador de caracteres no SCeditor

Informações:
Autor: Ange Tuteur
Funcionalidade: Todas as Versões

---

Acesse:

Painel de Controle ☛ Módulos ☛ HTML & Javascript ☛ Gestão dos códigos Javascript

E crie um novo Javascript em investimento nos tópicos com esse código:

Código:

$(function() {
  if (!document.getElementById('text_editor_textarea')) return; // no textarea ? better not continue
 
  // definir dados globais para ser armazenada em cache e reutilizada
  window.$fa_char = {
    area : document.getElementById('text_editor_textarea'), // mensagem da caixa de mensagem
    current : 0, // caracteres digitados atuais
    maximum : /page_profil=signature/.test(window.location.search) ? 1000 : 60000, // caracteres máximo permitido
    used : null, // cache de nó para caracteres usados
    remain : null, // cache de nó para caracteres restantes
    instance : null, // sceditor instance
  
    // calcular os caracteres utilizados e restante
    calculate : function() {
      $fa_char.current = ($fa_char.instance ? $fa_char.instance.val() : $fa_char.area.value).length; // get the message length
      $fa_char.used.innerHTML = $fa_char.current; // Atualiza a contagem atual
      $fa_char.remain.innerHTML = '<span ' + ($fa_char.current >= $fa_char.maximum ? 'style="color:#F00"' : '') + '>' + ($fa_char.maximum - $fa_char.current) + '</span>'; // atualizar os caracteres restantes
    }
  };
 
  var node = document.createElement('DIV'); // recipiente para os dados chararacter
 
  node.id = 'faCharCounter'; // o ID é usado principalmente para estilos definidos pelo usuário
  node.innerHTML = '<span id="faCharUsed">0</span> caracteres utilizados de ' + $fa_char.maximum + ' (<span id="faCharRemain" style="color:#090">' + $fa_char.maximum + '</span> restantes)'; // definir os nossos dados de caráter
  $fa_char.area.parentNode.insertBefore(node, $fa_char.area); // inserir o recipiente antes da área de texto
 
  // atualizar os caches nó de modo que não tem que continuo recebendo esses elementos
  $fa_char.used = document.getElementById('faCharUsed');
  $fa_char.remain = document.getElementById('faCharRemain');
 
  // executar outro doc pronto para corresponder-se com o sceditor
  $(function() {
  
    // dependendo se o sceditor estiver presente, um destes eventos será ligado
    if ($.sceditor) {
      var container = $('.sceditor-container');
      $fa_char.instance = $($fa_char.area).sceditor('instance');
      $('textarea', container)[0].oninput = $fa_char.calculate; // source
      $('iframe', container).contents()[0].body.oninput = $fa_char.calculate; // wysiwyg
    } else $fa_char.area.oninput = $fa_char.calculate;
  
    $fa_char.calculate(); // obter a contagem de caracteres atual no carregamento da página
  });
});

Resultado: