Adicionar novo botão no SCEditor

Detalhes da questão

Endereço do fórum: http://pre-vestibulando.forumeiros.com
Versão do fórum: phpBB3

Descrição

Saudação, Pessoal do FdF.

Neste dia, eu queria colocar uma nova opção na minha caixa de mensagem. Por esse motivo, vou apresentar através de ilustrações e comentários a forma como eu quero que seja feito. Sendo assim, vamos à questão:


Explicando por etapas

Etapa 01 - Alocar a opção, o ícone do botão [como demonstrado na figura] e quando a seta estiver sobre ele aparecer a nomeação "Símbolos".



Etapa 02 - Depois de clicado no botão, deve aparecer os símbolos e assim, o usuário poderá escolher o signo que lhe agrada para pôr na sua mensagem.



Etapa 03 - Os signos devem está organizados de forma parecida com o botão de cores, por exemplo.



Materiais:

Ícone do botão

Símbolos:

Código:

C ~ ≈ ≠ ≡ ≠ ∀ ∃ ⇒ ⇔ → ƒ ∈ ∋ℝ ℕ ℕ* ℚ ℤ ℤ* ℤ+ ℤ- Ø ¢ | | ٧ ٨ ∧ ∨ ⊂ ⊃ ∆ ∇ ∩ Ո ∪ ○ f◦g − × ± ∓­ ÷ ⊕ • · ⊙ ⊗ ◈ 丄 ⊥ 丅 ㅜ √ ∛ ∜ ∑ ∏ ⊥ ⊿ → ↑ ↓ ← Շ ≮ ⌒ ≯ ≤ ≥ ∝ π ℮ אօ ∞ Å ■ | ∣ ∣ 4‾ ┴ ║ ij \ # № ∟ ∠ ℓ ♯ fˉ¹ ● ‰ ² ³ ¹ º ª ⁿ ⁴ ⁿˉ ༝ ⁿˉ¹ ∫ a ∝ ₁ ₂ ₃ ₄ ı ո ց ь հ զ ս օ ג ½ ¼ ¾ ½ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞ $ £ ₁օօ ∴ ∵ ∷ ㋵ α β γ δ λ μ Ω ο ρ φ χ ψ ξ ε η θ ∂ ω

Obs: Tutorial - Já vi e li esse tutorial


Em suma é isso galera... Até mais!

Antes de começarmos, eu preciso que você me forneça um array (vetor) com todos os caracteres que deseja colocar.

Vou fazer um exemplo com algumas letras do alfabeto:

Código:

[
  'a',
  'b',
  'c',
  'd'
  // E assim por diante.
]

Note as vírgulas ao final de cada item (exceto no último).

Spoiler:

o/

Olá, irei fazer isso daqui algum tempo. Vou ter que sair agora. rsrs

Spoiler:

Enquanto a isso eu confundir e coloquei "Tutorial" em vez de "Dúvida" conforme apresenta na instrução:



O título já foi corrigido.

Até mais!

Luiz escreveu:Antes de começarmos, eu preciso que você me forneça um array (vetor) com todos os caracteres que deseja colocar.

Vou fazer um exemplo com algumas letras do alfabeto:

Código:

[
  'a',
  'b',
  'c',
  'd'
  // E assim por diante.
]

Note as vírgulas ao final de cada item (exceto no último).

Spoiler:

o/

Dessa forma?

Código:

[
'C',
'~',
'≈',
'≠',
'≡',
'≠',
'∀',
'∃',
'⇒',
'⇔',
'→',
'ƒ',
'',
'∈',
'∋',
'ℝ',
'ℕ',
'ℕ*',
'ℚ',
'ℤ',
'ℤ*',
'ℤ+',
'ℤ-',
'Ø',
'¢',
'|',
'|',
'٨',
'٧',
'∧',
'∨',
'⊂',
'⊃',
'∆',
'∇',
'∩',
'Ո',
'∪',
'○',
'f',
'◦',
'g',
'−',
'×',
'±',
'∓',
'÷',
'⊕',
'•',
'·',
'⊙',
'⊗',
'◈',
'丄',
'⊥',
'丅',
'ㅜ',
'√',
'∛',
'∜',
'∑',
'∏',
'⊥',
'⊿',
'→',
'↑',
'↓',
'',
'←',
'Շ',
'≮ ',
'⌒',
'≯ ',
'≤',
'≥',
'∝',
'π',
'℮',
'אօ',
'∞',
'Å',
'■',
'|',
'∣',
'∣',
'4',
'‾',
'┴',
'║',
'ij',
'\',
'#',
'№',
'∟',
'∠',
'ℓ',
'♯',
'fˉ¹',
'●',
'‰',
'²',
'³',
'¹',
'º',
'ª',
'ⁿ',
'⁴',
'ⁿˉ',
'༝',
'ⁿˉ¹',
'∫ ',
'a',
'∝',
'₁',
'₂',
'₃',
'₄',
'ı',
'ո',
'ց',
'ь',
'հ',
'զ',
'ս',
'օ',
'₁',
'',
'£ ',
'$',
'⅞',
'⅝',
'⅜',
'⅛',
'⅔',
'⅓',
'½',
'¾',
'¼',
'½',
'∴',
'∵',
'∷',
'㋵',
'α',
'β',
'γ',
'δ',
'λ',
'μ',
'Ω',
'ο',
'ρ',
'φ',
'χ',
'ψ',
'ξ',
'ε',
'η',
'θ',
'∂',
'',
'ω',
'₁օօ'
 //
]

Qualquer coisa é só comentar.

Em casos como o acima, edite a última mensagem.

---

Dessa forma?

Yeah.
Acabo de pensar em um jeito um pouco mais completo.

Como serão vários símbolos, podemos criar um meio de filtrar por um item (pelo seu nome). Você deseja isso?

Pode ser. Agora se for dar muito trabalho pra vc pode optar pelo jeito mais simples mesmo.

Na verdade nesse caso o maior trabalho será do senhor, portanto, fique livre para prosseguir do modo como desejar.

O que você deverá fazer é:

Código:

{
  'C': 'Nome do caractere',
  '~': 'Nome do caractere',
  '≈': 'Nome do caractere',
  '≠': 'Nome do caractere',
  '≡': 'Nome do caractere',
  '≠': 'Nome do caractere',
  '∀': 'Nome do caractere',
  '∃': 'Nome do caractere',
  '⇒': 'Nome do caractere',
  '⇔': 'Nome do caractere',
  '→': 'Nome do caractere',
  'ƒ': 'Nome do caractere',
  '': 'Nome do caractere',
  '∈': 'Nome do caractere',
  '∋': 'Nome do caractere',
  'ℝ': 'Nome do caractere',
  'ℕ': 'Nome do caractere',
  'ℕ*': 'Nome do caractere',
  'ℚ': 'Nome do caractere',
  'ℤ': 'Nome do caractere',
  'ℤ*': 'Nome do caractere',
  'ℤ+': 'Nome do caractere',
  'ℤ-': 'Nome do caractere',
  'Ø': 'Nome do caractere',
  '¢': 'Nome do caractere',
  '|': 'Nome do caractere',
  '|': 'Nome do caractere',
  '٨': 'Nome do caractere',
  '٧': 'Nome do caractere',
  '∧': 'Nome do caractere',
  '∨': 'Nome do caractere',
  '⊂': 'Nome do caractere',
  '⊃': 'Nome do caractere',
  '∆': 'Nome do caractere',
  '∇': 'Nome do caractere',
  '∩': 'Nome do caractere',
  'Ո': 'Nome do caractere',
  '∪': 'Nome do caractere',
  '○': 'Nome do caractere',
  'f': 'Nome do caractere',
  '◦': 'Nome do caractere',
  'g': 'Nome do caractere',
  '−': 'Nome do caractere',
  '×': 'Nome do caractere',
  '±': 'Nome do caractere',
  '∓': 'Nome do caractere',
  '÷': 'Nome do caractere',
  '⊕': 'Nome do caractere',
  '•': 'Nome do caractere',
  '·': 'Nome do caractere',
  '⊙': 'Nome do caractere',
  '⊗': 'Nome do caractere',
  '◈': 'Nome do caractere',
  '丄': 'Nome do caractere',
  '⊥': 'Nome do caractere',
  '丅': 'Nome do caractere',
  'ㅜ': 'Nome do caractere',
  '√': 'Nome do caractere',
  '∛': 'Nome do caractere',
  '∜': 'Nome do caractere',
  '∑': 'Nome do caractere',
  '∏': 'Nome do caractere',
  '⊥': 'Nome do caractere',
  '⊿': 'Nome do caractere',
  '→': 'Nome do caractere',
  '↑': 'Nome do caractere',
  '↓': 'Nome do caractere',
  '': 'Nome do caractere',
  '←': 'Nome do caractere',
  'Շ': 'Nome do caractere',
  '≮ ': 'Nome do caractere',
  '⌒': 'Nome do caractere',
  '≯ ': 'Nome do caractere',
  '≤': 'Nome do caractere',
  '≥': 'Nome do caractere',
  '∝': 'Nome do caractere',
  'π': 'Nome do caractere',
  '℮': 'Nome do caractere',
  'אօ': 'Nome do caractere',
  '∞': 'Nome do caractere',
  'Å': 'Nome do caractere',
  '■': 'Nome do caractere',
  '|': 'Nome do caractere',
  '∣': 'Nome do caractere',
  '∣': 'Nome do caractere',
  '4': 'Nome do caractere',
  '‾': 'Nome do caractere',
  '┴': 'Nome do caractere',
  '║': 'Nome do caractere',
  'ij': 'Nome do caractere',
  '/': 'Nome do caractere',
  '#': 'Nome do caractere',
  '№': 'Nome do caractere',
  '∟': 'Nome do caractere',
  '∠': 'Nome do caractere',
  'ℓ': 'Nome do caractere',
  '♯': 'Nome do caractere',
  'fˉ¹': 'Nome do caractere',
  '●': 'Nome do caractere',
  '‰': 'Nome do caractere',
  '²': 'Nome do caractere',
  '³': 'Nome do caractere',
  '¹': 'Nome do caractere',
  'º': 'Nome do caractere',
  'ª': 'Nome do caractere',
  'ⁿ': 'Nome do caractere',
  '⁴': 'Nome do caractere',
  'ⁿˉ': 'Nome do caractere',
  '༝': 'Nome do caractere',
  'ⁿˉ¹': 'Nome do caractere',
  '∫ ': 'Nome do caractere',
  'a': 'Nome do caractere',
  '∝': 'Nome do caractere',
  '₁': 'Nome do caractere',
  '₂': 'Nome do caractere',
  '₃': 'Nome do caractere',
  '₄': 'Nome do caractere',
  'ı': 'Nome do caractere',
  'ո': 'Nome do caractere',
  'ց': 'Nome do caractere',
  'ь': 'Nome do caractere',
  'հ': 'Nome do caractere',
  'զ': 'Nome do caractere',
  'ս': 'Nome do caractere',
  'օ': 'Nome do caractere',
  '₁': 'Nome do caractere',
  '': 'Nome do caractere',
  '£ ': 'Nome do caractere',
  '$': 'Nome do caractere',
  '⅞': 'Nome do caractere',
  '⅝': 'Nome do caractere',
  '⅜': 'Nome do caractere',
  '⅛': 'Nome do caractere',
  '⅔': 'Nome do caractere',
  '⅓': 'Nome do caractere',
  '½': 'Nome do caractere',
  '¾': 'Nome do caractere',
  '¼': 'Nome do caractere',
  '½': 'Nome do caractere',
  '∴': 'Nome do caractere',
  '∵': 'Nome do caractere',
  '∷': 'Nome do caractere',
  '㋵': 'Nome do caractere',
  'α': 'Nome do caractere',
  'β': 'Nome do caractere',
  'γ': 'Nome do caractere',
  'δ': 'Nome do caractere',
  'λ': 'Nome do caractere',
  'μ': 'Nome do caractere',
  'Ω': 'Nome do caractere',
  'ο': 'Nome do caractere',
  'ρ': 'Nome do caractere',
  'φ': 'Nome do caractere',
  'χ': 'Nome do caractere',
  'ψ': 'Nome do caractere',
  'ξ': 'Nome do caractere',
  'ε': 'Nome do caractere',
  'η': 'Nome do caractere',
  'θ': 'Nome do caractere',
  '∂': 'Nome do caractere',
  '': 'Nome do caractere',
  'ω': 'Nome do caractere',
  '₁օօ': 'Nome do caractere'
}

Trocar "Nome do caractere" pelo nome do símbolo.
Prefere do outro jeito ou poderá fazer isso?

Se você optar por fazê-lo, cuidado só para não remover nenhuma vírgula ou aspas.

Estarei no aguardo de uma resposta.

Então eu prefiro o jeito mais fácil mesmo.

Olá novamente,

Acho que com a caixa de busca ficaria melhor para os usuários, mas é o senhor quem manda.

Em seu fórum, acesse:
Painel -> Módulos -> Gestão dos Códigos JavaScript.

01) Ative o gerenciamento de códigos JavaScript.

02) Crie um novo JS investido em todas as páginas com o seguinte código:

Código:

(function ($) {
  'use strict';

  var charset = [
    'C',
    '~',
    '≈',
    '≠',
    '≡',
    '≠',
    '∀',
    '∃',
    '⇒',
    '⇔',
    '→',
    'ƒ',
    '',
    '∈',
    '∋',
    'ℝ',
    'ℕ',
    'ℕ*',
    'ℚ',
    'ℤ',
    'ℤ*',
    'ℤ+',
    'ℤ-',
    'Ø',
    '¢',
    '|',
    '|',
    '٨',
    '٧',
    '∧',
    '∨',
    '⊂',
    '⊃',
    '∆',
    '∇',
    '∩',
    'Ո',
    '∪',
    '○',
    'f',
    '◦',
    'g',
    '−',
    '×',
    '±',
    '∓',
    '÷',
    '⊕',
    '•',
    '·',
    '⊙',
    '⊗',
    '◈',
    '丄',
    '⊥',
    '丅',
    'ㅜ',
    '√',
    '∛',
    '∜',
    '∑',
    '∏',
    '⊥',
    '⊿',
    '→',
    '↑',
    '↓',
    '',
    '←',
    'Շ',
    '≮ ',
    '⌒',
    '≯ ',
    '≤',
    '≥',
    '∝',
    'π',
    '℮',
    'אօ',
    '∞',
    'Å',
    '■',
    '|',
    '∣',
    '∣',
    '4',
    '‾',
    '┴',
    '║',
    'ij',
    '#',
    '№',
    '∟',
    '∠',
    'ℓ',
    '♯',
    'fˉ¹',
    '●',
    '‰',
    '²',
    '³',
    '¹',
    'º',
    'ª',
    'ⁿ',
    '⁴',
    'ⁿˉ',
    '༝',
    'ⁿˉ¹',
    '∫ ',
    'a',
    '∝',
    '₁',
    '₂',
    '₃',
    '₄',
    'ı',
    'ո',
    'ց',
    'ь',
    'հ',
    'զ',
    'ս',
    'օ',
    '₁',
    '',
    '£ ',
    '$',
    '⅞',
    '⅝',
    '⅜',
    '⅛',
    '⅔',
    '⅓',
    '½',
    '¾',
    '¼',
    '½',
    '∴',
    '∵',
    '∷',
    '㋵',
    'α',
    'β',
    'γ',
    'δ',
    'λ',
    'μ',
    'Ω',
    'ο',
    'ρ',
    'φ',
    'χ',
    'ψ',
    'ξ',
    'ε',
    'η',
    'θ',
    '∂',
    'ω',
    '₁օօ'
  ];

  $(window).on('load', function () {
    if ($.sceditor) return;

    var $drop = $([
      '<div class="sceditor-dropdown sceditor-dropdown-math" style="display: none;">',
      '  <div class="fa-math-charset"></div>',
      '</div>'
    ].join('\n'))
      .appendTo('body')
    ;

    $.each(charset, function (index, char) {
      $('<span>', { 'class': 'fa-math-char' })
        .text(char)
        .on('click', function (event) {
          event.stopPropagation();
          event.preventDefault();

          $('#text_editor_textarea')
            .sceditor('instance')
            .insert($(this).text())
          ;

          $drop.hide();
        })
        .appendTo($drop.find('.fa-math-charset'))
      ;
    });

    $('<a>', {
      'class': 'sceditor-button sceditor-button-math',
      'html' : '<div>Matemática</div>'
    })
      .on('click', function (event) {
        event.stopPropagation();
        event.preventDefault();

        var $this = $(this);

        if ($drop.is(':visible')) {
          $drop.hide();
         
          return;
        }

        $drop
          .css('top', $this.offset().top + $this.height())
          .css('left', $this.offset().left)
          .css('position', 'absolute')
          .show()
        ;
      })
      .appendTo('.sceditor-group:last')
    ;

    $('body').on('click', function () {
      if ($drop.is(':visible')) $drop.hide();
    });

    $('<style>', { 'text': [
      '.sceditor-button-math > div {',
      '  background-image: url(https://i.imgur.com/lWJ2Mqe.png) !important;',
      '  background-size: 16px;',
      '  background-position:  center;',
      '}',
      '',
      '.sceditor-dropdown-math {',
      '  max-height: 150px;',
      '  overflow-y: auto;',
      '  padding: 0px !important;',
      '}',
      '',
      '.sceditor-dropdown-math > div > span {',
      '  cursor: pointer;',
      '  font-size: 17px;',
      '  padding: 6px 10px;',
      '  border-bottom: dashed 1px #ddd;',
      '  display: block;',
      '}',
      '',
      '.sceditor-dropdown-math > div > span:hover {',
      '  background-color: #eee;',
      '}'
    ].join('\n') }).appendTo('head');
  });
}(jQuery));

E:
Não se esqueça de votar nos seus candidatos favoritos!

o/

Olá, amigo. Infelizmente ainda não resultou. Observe:

https://i.servimg.com/u/f62/19/80/65/20/aindan10.png

Perdão. Eu me esqueci de adicionar um caractere. :v

Eu fiz:

Código:

if ($.sceditor) return;

O correto era:

Código:

if (!$.sceditor) return;

A desatenção me pegou agora.

Enfim, troque por:

Código:

(function ($) {
  'use strict';
 
  var charset = [
    'C',
    '~',
    '≈',
    '≠',
    '≡',
    '≠',
    '∀',
    '∃',
    '⇒',
    '⇔',
    '→',
    'ƒ',
    '',
    '∈',
    '∋',
    'ℝ',
    'ℕ',
    'ℕ*',
    'ℚ',
    'ℤ',
    'ℤ*',
    'ℤ+',
    'ℤ-',
    'Ø',
    '¢',
    '|',
    '|',
    '٨',
    '٧',
    '∧',
    '∨',
    '⊂',
    '⊃',
    '∆',
    '∇',
    '∩',
    'Ո',
    '∪',
    '○',
    'f',
    '◦',
    'g',
    '−',
    '×',
    '±',
    '∓',
    '÷',
    '⊕',
    '•',
    '·',
    '⊙',
    '⊗',
    '◈',
    '丄',
    '⊥',
    '丅',
    'ㅜ',
    '√',
    '∛',
    '∜',
    '∑',
    '∏',
    '⊥',
    '⊿',
    '→',
    '↑',
    '↓',
    '',
    '←',
    'Շ',
    '≮ ',
    '⌒',
    '≯ ',
    '≤',
    '≥',
    '∝',
    'π',
    '℮',
    'אօ',
    '∞',
    'Å',
    '■',
    '|',
    '∣',
    '∣',
    '4',
    '‾',
    '┴',
    '║',
    'ij',
    '#',
    '№',
    '∟',
    '∠',
    'ℓ',
    '♯',
    'fˉ¹',
    '●',
    '‰',
    '²',
    '³',
    '¹',
    'º',
    'ª',
    'ⁿ',
    '⁴',
    'ⁿˉ',
    '༝',
    'ⁿˉ¹',
    '∫ ',
    'a',
    '∝',
    '₁',
    '₂',
    '₃',
    '₄',
    'ı',
    'ո',
    'ց',
    'ь',
    'հ',
    'զ',
    'ս',
    'օ',
    '₁',
    '',
    '£ ',
    '$',
    '⅞',
    '⅝',
    '⅜',
    '⅛',
    '⅔',
    '⅓',
    '½',
    '¾',
    '¼',
    '½',
    '∴',
    '∵',
    '∷',
    '㋵',
    'α',
    'β',
    'γ',
    'δ',
    'λ',
    'μ',
    'Ω',
    'ο',
    'ρ',
    'φ',
    'χ',
    'ψ',
    'ξ',
    'ε',
    'η',
    'θ',
    '∂',
    'ω',
    '₁օօ'
  ];
 
  $(window).on('load', function () {
    if (!$.sceditor) return;
 
    var $drop = $([
      '<div class="sceditor-dropdown sceditor-dropdown-math" style="display: none;">',
      '  <div class="fa-math-charset"></div>',
      '</div>'
    ].join('\n'))
      .appendTo('body')
    ;
 
    $.each(charset, function (index, char) {
      $('<span>', { 'class': 'fa-math-char' })
        .text(char)
        .on('click', function (event) {
          event.stopPropagation();
          event.preventDefault();
 
          $('#text_editor_textarea')
            .sceditor('instance')
            .insert($(this).text())
          ;
 
          $drop.hide();
        })
        .appendTo($drop.find('.fa-math-charset'))
      ;
    });
 
    $('<a>', {
      'class': 'sceditor-button sceditor-button-math',
      'html' : '<div>Matemática</div>'
    })
      .on('click', function (event) {
        event.stopPropagation();
        event.preventDefault();
 
        var $this = $(this);
 
        if ($drop.is(':visible')) {
          $drop.hide();
       
          return;
        }
 
        $drop
          .css('top', $this.offset().top + $this.height())
          .css('left', $this.offset().left)
          .css('position', 'absolute')
          .show()
        ;
      })
      .appendTo('.sceditor-group:last')
    ;
 
    $('body').on('click', function () {
      if ($drop.is(':visible')) $drop.hide();
    });
 
    $('<style>', { 'text': [
      '.sceditor-button-math > div {',
      '  background-image: url(https://i.imgur.com/lWJ2Mqe.png) !important;',
      '  background-size: 16px;',
      '  background-position:  center;',
      '}',
      '',
      '.sceditor-dropdown-math {',
      '  max-height: 150px;',
      '  overflow-y: auto;',
      '  padding: 0px !important;',
      '}',
      '',
      '.sceditor-dropdown-math > div > span {',
      '  cursor: pointer;',
      '  font-size: 17px;',
      '  padding: 6px 10px;',
      '  border-bottom: dashed 1px #ddd;',
      '  display: block;',
      '}',
      '',
      '.sceditor-dropdown-math > div > span:hover {',
      '  background-color: #eee;',
      '}'
    ].join('\n') }).appendTo('head');
  });
}(jQuery));

o/

Funcionou! Obrigado, amigo!

Pode fechar o tópico.

@James Watts, favor não usar formatações desnecessárias nos tópicos (como itálico).

Obrigado.