Criar tags BBcode

[sandra51]

Detalhes da questão

Endereço do fórum: http://sfgrafica.forumattivo.com/
Versão do fórum: PhpBB2

Descrição

Bom dia.

Solicito gentilmente a ajuda de voces, eu segui estes dois tutoriais, coloquei os devidos codigos no meu forum de testes mas nao funcionou:

https://ajuda.forumeiros.com/t99723-plugin-criar-tags-bbcode
https://ajuda.forumeiros.com/t100087-addon-criar-botao-no-editor-com-lista-de-comandos

O botao com a lista de comandos nao aparece no editor:



Agradeço antecipadamente

Sandra

[Shek]

Olá Sandra.

Para o primeiro item, quis são as configurações que você usou para os BBcodes? Você modificou o script ao adicionar? Se sim, poste aqui, por favor. Em seguida, podemos partir para o próximo passo que é adicionar o botão no SCEditor.

Até mais.

[sandra51]

Olá Shek, obrigada por me responder.
Então, eu nao fiz ainda nenhuma modificação nos codigos, copiei do tutorial e colei no forum pra depois personalizar mas nao apareceu nada. Todos dois estão exatamente como copiei.

[Shek]

Porque no código no tópico, explica quais são os BBcodes disponíveis, e por tanto, você precisa verificá-los. Por favor, releia o tópico do plugin e faça as modificações de acordo com o que é ensinado.

[sandra51]

Shek nao entendi bem o que voce quis dizer.
No tutorial explica de criar um novo javascript e colar o codigo e colar também o css.
Eu fiz isto.
No outro tutorial criar o botao que quando clicado aparece a tag que è definida no primeiro tutorial,
ou seja os botoes que chamam automaticamente as tags.
O problema é que nao apareceram no editor os botoes para que eu possa fazer as modificaçoes.

[Shek]

Como eu disse, você não interpretou o plugin. Os BBcodes que são criados são esses: https://i.imgur.com/RPUYvDb.png É isso mesmo que queria?

[sandra51]

Sim sao estas imagens que quero, se digito manualmente o codigo fica assim:

[Shek]

Olá!

Eu refiz os teste novamente, e para mim funcionou perfeitamente. Por favor, re-faça a aplicação do script aplicando-o para os tópicos.

Eu fiz o teste via console, e funcionou até mesmo no fórum que mencionou. No console, diz que o código foi alterado e está com um encerramento incorreto.

[sandra51]

Ok Shek troquei os codigos e agora funciona e apareceu também o botao. Agora posso personalizar do meu jeito.
Pode ser que na hora de copiar veio faltando algum pedaço.



Se possivel gostaria de te fazer uma pergunta.
E' possivel fazer com que este botao seja visivel somente aos administradores e moderadores e invisivel aos usuarios?

Muito obrigada pela ajuda.

[Shek]

Olá!

Troque o código do plugin por este e veja com uma conta de membro se ele não aparece.

Código:

if (_userdata["user_level"] == 1 || _userdata["user_level"] == 2) {
$(function() {
   
  if (!$.sceditor) return;
 
  $.sceditor.command.set('cmd', {
 
  dropDown : function(editor, caller, callback) {
 
    // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula
 
    var items = ['sucesso', 'alerta', 'aviso'];
 
    var content = $(
    '<div>' +
    '  <div>' +
    '    <label>Selecione uma tag</label>' +
    '    <select></select>' +
    '  </div>' +
    '  <div>' +
    '    <label>Título (opcional)</label>' +
    '    <input type="text" id="cmdValue" value="" />' +
    '  </div>' +
    '  <div>' +
    '    <input type="button" class="button" value="Inserir">' +
    '  </div>' +
    '</div>'
    );
            $.each(items, function(key, val) {
                  content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>');
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true);
            });
            editor.createDropDown(caller, "cmd", content);
  },
  // WYSIWYG MODE
  exec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var before = '[' + cmd + ']', end = '[/' + cmd + ']', title = $('#cmdValue').val();
        if(title !== '') {
            before = '[' + cmd + '="' + title + '"]';
            editor.wysiwygEditorInsertHtml(before, end);
        }
      });
  },
  // SOURCE MODE
  txtExec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var title = $('#cmdValue').val();
        if(title) {
            editor.insertText('[' + cmd + '="' + title + '"]','[/' + cmd + ']');
        } else {
            editor.insertText('[' + cmd + ']','[/' + cmd + ']');
        }
      });
  }, tooltip: "Lista de comandos"});
 
  toolbar = toolbar.replace(/quote/,'cmd,quote');
 
  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-cmd div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' +
  '  .sceditor-cmd {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-cmd select {' +
  '  margin: 0 0 .75em;' +
  '}' +
  '</style>'
  );
});
};

[sandra51]

Shek nao funcionou, coloquei o codigo mas nao aparece o botao nem como admin nem como membro, sumiu totalmente.
O outro aparece mas os membros também podem ver.
Eu deixei ele instalado caso voce queira ver.

[Shek]

Troca por esse:

Código:


$(function() {
 
  if (!$.sceditor) return;
   if (_userdata["user_level"] == 1 || _userdata["user_level"] == 2) {
  $.sceditor.command.set('cmd', {
 
  dropDown : function(editor, caller, callback) {
 
    // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula
 
    var items = ['sucesso', 'alerta', 'aviso'];
 
    var content = $(
    '<div>' +
    '  <div>' +
    '    <label>Selecione uma tag</label>' +
    '    <select></select>' +
    '  </div>' +
    '  <div>' +
    '    <label>Título (opcional)</label>' +
    '    <input type="text" id="cmdValue" value="" />' +
    '  </div>' +
    '  <div>' +
    '    <input type="button" class="button" value="Inserir">' +
    '  </div>' +
    '</div>'
    );
            $.each(items, function(key, val) {
                  content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>');
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true);
            });
            editor.createDropDown(caller, "cmd", content);
  },
  // WYSIWYG MODE
  exec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var before = '[' + cmd + ']', end = '[/' + cmd + ']', title = $('#cmdValue').val();
        if(title !== '') {
            before = '[' + cmd + '="' + title + '"]';
            editor.wysiwygEditorInsertHtml(before, end);
        }
      });
  },
  // SOURCE MODE
  txtExec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var title = $('#cmdValue').val();
        if(title) {
            editor.insertText('[' + cmd + '="' + title + '"]','[/' + cmd + ']');
        } else {
            editor.insertText('[' + cmd + ']','[/' + cmd + ']');
        }
      });
  }, tooltip: "Lista de comandos"});
 
  toolbar = toolbar.replace(/quote/,'cmd,quote');
 
  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-cmd div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' +
  '  .sceditor-cmd {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-cmd select {' +
  '  margin: 0 0 .75em;' +
  '}' +
  '</style>'
  );
   }
});

[sandra51]

Perfeito Shek agora funcionou e nao aparece para o usuario.  
Muito obrigada pela sua preciosa ajuda, se tiver problemas na personalizaçao te peço socorro.

 

[Shek]

De nada.

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".