Fórum grátis: Ajuda e suporte para fóruns Forumeiros.com

[AddOn] Criar botão no editor com lista de comandos

Fórum dos Fóruns :: Serviços para usuários :: Zona de codificação e Análise

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

  • 0

[AddOn] Criar botão no editor com lista de comandos Empty [AddOn] Criar botão no editor com lista de comandos

Mensagem por Daemon em 03.06.15 16:55


Criar botão no editor com lista de comandos
Este código irá criar um botão no editor, e uma lista de comandos para tags bbcode.
Características e aplicação
Criador: @Daemon
Versão: 1.315032014
Versão: Todas as versões
Resultado da aplicação
[AddOn] Criar botão no editor com lista de comandos QDta3qT
Local de instalação
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse:
Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript >> Investimento >> Em todas as páginas.
Código:
/*
 *  Application: Lista de Comandos
 *  Date: 15/03/2014
 *  Version: 1.315032014
 *  Copyright (c) 2014 Daemon <bestskins.forumeiros.com>
 *  This work is free. You can redistribute it and/or modify it
 */
$(function() {
    if (!$.sceditor) return;

    $.sceditor.command.set('custom-command', {

        dropDown: function(editor, caller, callback) {

            // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula

            var add = ['sucesso', 'aviso', 'alerta'];

            var content = $(
                '<div>' +
                '    <div>' +
                '        <label>Selecione uma tag</label>' +
                '        <select></select>' +
                '    </div>' +
                '    <div>' +
                '        <label>Título (opcional)</label>' +
                '        <input type="text" id="custom-input" value="" />' +
                '    </div>' +
                '    <div>' +
                '        <label>Fechar tag</label>' +
                '        <input type="checkbox" id="custom-checkbox" checked="checked">' +
                '    </div>' +
                '    <div>' +
                '        <input type="button" class="button" value="Inserir">' +
                '    </div>' +
                '</div>'
            );
            $.each(add, function(key, val) {
                content.find("select").append("<option class='sceditor-custom-option' value='" + val + "'>" + val + "</option>");
            });
            content.find(".button").click(function(e) {
                callback(content.find("select").val());
                editor.closeDropDown(true);
            });
            editor.createDropDown(caller, "custom-command", content);
        },
        // WYSIWYG MODE
        exec: function(caller) {
            var editor = this;
            $.sceditor.command.get("custom-command").dropDown(editor, caller, function(tag) {
                var before = '[' + tag + ']',
                    end = '[/' + tag + ']',
                    title = $("#custom-input").val(),
                    close = $("#custom-checkbox");
                if (title !== '') before = '[' + tag + '="' + title + '"]';
                (close.is(':checked')) ? editor.wysiwygEditorInsertHtml(before, end) : editor.wysiwygEditorInsertHtml(before);
            });
        },
        // SOURCE MODE
        txtExec: function(caller) {
            var editor = this;
            $.sceditor.command.get('custom-command').dropDown(editor, caller, function(tag) {
                var before = '[' + tag + ']',
                    end = '[/' + tag + ']',
                    title = $("#custom-input").val(),
                    close = $("#custom-checkbox");
                if (title !== '') before = '[' + tag + '="' + title + '"]';
                (close.is(':checked')) ? editor.insertText(before, end) : editor.insertText(before);
            });
        },
        tooltip: "Lista de comandos"
    });

    toolbar = toolbar.replace(/quote/, 'custom-command,quote');

    $("head").append(
        '<style type="text/css">' +
        '.sceditor-button-custom-command div {' +
        '    background:url(https://cdn0.iconfinder.com/data/icons/user-interface-49/64/Untitled-2-03-16.png) !important;' +
        '}' +
        '.sceditor-custom-command {' +
        '    width:auto;' +
        '    height:auto;' +
        '    overflow-y:auto;' +
        '}' +
        '.sceditor-custom-command select {' +
        '    margin: 0 0 0.75em;' +
        '}' +
        '</style>'
    );
});

Importante: Leia a notação dentro do código


Última edição por Daemon em 05.07.18 13:11, editado 2 vez(es)
Daemon

Daemon
Membro do Fórum

Masculino
Inscrito dia : 02/03/2012
Mensagens : 1127
Pontos Ativos : 1732

Ver perfil do usuário http://bestskins.forumeiros.com/

[AddOn] Criar botão no editor com lista de comandos Empty Re: [AddOn] Criar botão no editor com lista de comandos

Mensagem por Karadruz DL em 30.10.16 2:27

Revivendo o tópico porque sim ( e porque ninguém comentou nada também ). Achei isso uma excelente ideia, mas estou com uma duvida, este plugin faz conjunto com este https://ajuda.forumeiros.com/t99723-plugin-criar-tags-bbcode , ou são dois plugins diferentes? Só tenho essa duvida mesmo.
Karadruz DL

Karadruz DL
Nível 4

Masculino
Inscrito dia : 28/10/2016
Mensagens : 31
Pontos Ativos : 45

Ver perfil do usuário http://digimonviverpg.forumeiros.com

[AddOn] Criar botão no editor com lista de comandos Empty Re: [AddOn] Criar botão no editor com lista de comandos

Mensagem por Daemon em 31.10.16 14:41

@Karadruz DL escreveu:
Revivendo o tópico porque sim ( e porque ninguém comentou nada também ). Achei isso uma excelente ideia, mas estou com uma duvida, este plugin faz conjunto com este https://ajuda.forumeiros.com/t99723-plugin-criar-tags-bbcode , ou são dois plugins diferentes? Só tenho essa duvida mesmo.

Meio que faz sim... este aqui servirá para você criar o botão no SCEDITOR que irá mostrar a lista de BBCodes que podem ser utilizados, e que são pré-definidos por você.

O do link que você citou, irá criar estas tags BBCodes, convertendo o BBCode para HTML.
Daemon

Daemon
Membro do Fórum

Masculino
Inscrito dia : 02/03/2012
Mensagens : 1127
Pontos Ativos : 1732

Ver perfil do usuário http://bestskins.forumeiros.com/

[AddOn] Criar botão no editor com lista de comandos Empty Re: [AddOn] Criar botão no editor com lista de comandos

Mensagem por Karadruz DL em 31.10.16 15:17

Sim sim, acabei de perceber isso testando no meu fórum! Gostei disso!
Karadruz DL

Karadruz DL
Nível 4

Masculino
Inscrito dia : 28/10/2016
Mensagens : 31
Pontos Ativos : 45

Ver perfil do usuário http://digimonviverpg.forumeiros.com

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

Fórum dos Fóruns :: Serviços para usuários :: Zona de codificação e Análise

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