Botão no sceditor para adicionar um iframe

4 participantes

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

Tópico resolvido Botão no sceditor para adicionar um iframe

Mensagem por sandra51 19.08.20 16:17

Detalhes da questão


Endereço do fórum: http://www.solaris-flashegrafica.com/
Versão do fórum: phpBB2

Descrição


Boa tarde,

Gostaria de saber se é possivel adicionar no sceditor um novo botao que ao ser clicado apareça no editor o codigo para inserir imagens feitas em html5, facilitando aos usuarios que tem pouca experiencia con codigos. O codigo seria este:

Código:
<iframe src="LINK ANIMAZIONE" style="border:0px; width:560px;height:500px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>

Mais ou menos como o antigo botao que usavamos para inserir imagens em Flash.

Agradeço antecipadamente pela ajuda.

Atenciosamente
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 19.08.20 16:49

Olá @Sandra51,

Crie uma nova página JavaScript com investimento em todas as páginas com o seguinte código:
Código:
(function($) {
    'use strict';


    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");

        if (!$sceditor.length) {
            return;
        }

        $([
                '<div class="sceditor-group fa-if-group">',
                '<a class="sceditor-button sceditor-button-if" data-sceditor-command="if" unselectable="on" title="Inserir um iframe">',
                '  <div unselectable="on" style="background-image: url(\'https://cdn2.iconfinder.com/data/icons/seo-web-2-3/128/Vigor_Heading-tag-html-h-seo-page-512.png\');background-position: center center; background-size: contain;">Inserir um iframe</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function() {
                $('.sceditor-insertif').toggle();
            })
            .insertAfter('.sceditor-group:last');

        $([
                '<div class="sceditor-dropdown sceditor-insertif">',
                '  <div>',
                '    <label for="fa-if-input">URL</label>',
                '    <input id="fa-if-input" placeholder="https://" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-if-button" value="Inserir">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .css({
                left: $('.fa-if-group').offset().left + 'px',
                top: $('.fa-if-group').offset().top + 'px',
                marginTop: '28px',
                display: 'none'
            })
            .appendTo('body');

        $('#fa-if-button')
            .on('click', function() {

                if (!$('#fa-if-input').val()) return false;

                $sceditor.sceditor('instance').insertText('<iframe src="' + $('#fa-if-input').val() + '" style="border:0px; width:560px;height:500px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>');

                $('.sceditor-insertif').toggle();
                $('#fa-if-input').val('');


            });
    });
}(jQuery));


Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 19.08.20 17:27

Pedxz coloquei o codigo e o botao aparece no editor mas clicando nao abre o codigo, nao acontece nada.

Botão no sceditor para adicionar um iframe Image514

Ah descobri uma coisa, o codigo funciona perfeitamente mas so na caixa de respostas normais, nao acontece nada naquela caixa de respostas rapidas.


Pedxz desculpa se te incomodo so mais um pouquinho, se nao for muito complicado, tem como adicionar um campo também para as medidas da imagem, tipo largura e altura?

Te agradeço pela atençao.
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 19.08.20 19:10

o codigo funciona perfeitamente mas so na caixa de respostas normais, nao acontece nada naquela caixa de respostas rapidas.
De facto é estranho o código funciona no meu fórum teste sem qualquer problema, talvez seja um conflito nas suas páginas JavaScript Aff


Altere o seu código para:
Código:
(function($) {
    'use strict';
 
 
    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");
 
        if (!$sceditor.length) {
            return;
        }
 
        $([
                '<div class="sceditor-group fa-if-group">',
                '<a class="sceditor-button sceditor-button-if" data-sceditor-command="if" unselectable="on" title="Inserir um iframe">',
                '  <div unselectable="on" style="background-image: url(\'https://cdn2.iconfinder.com/data/icons/seo-web-2-3/128/Vigor_Heading-tag-html-h-seo-page-512.png\');background-position: center center; background-size: contain;">Inserir um iframe</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function() {
                $('.sceditor-insertif').toggle();
            })
            .insertAfter('.sceditor-group:last');
 
        $([
                '<div class="sceditor-dropdown sceditor-insertif">',
                '  <div>',
                '    <label for="fa-if-input">URL</label>',
                '    <input id="fa-if-input" placeholder="https://" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputw">Largura (Opcional)</label>',
                '    <input id="fa-if-inputw" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputh">Altura (Opcional)</label>',
                '    <input id="fa-if-inputh" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-if-button" value="Inserir">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .css({
                left: $('.fa-if-group').offset().left + 'px',
                top: $('.fa-if-group').offset().top + 'px',
                marginTop: '28px',
                display: 'none'
            })
            .appendTo('body');
 
        $('#fa-if-button')
            .on('click', function() {
 
                if (!$('#fa-if-input').val()) return false;
 
                $sceditor.sceditor('instance').insertText('<iframe src="' + $('#fa-if-input').val() + '" style="border:0px; width:' + ($('#fa-if-inputw').val() ? $('#fa-if-inputw').val() : 560 ) +'px ;height:' + ($('#fa-if-inputh').val() ? $('#fa-if-inputh').val() : 500 ) +'px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>');
 
                $('.sceditor-insertif').toggle();
                $('.sceditor-insertif').find('input:not([type="button"])').val('');
 
 
            });
    });
}(jQuery));
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 19.08.20 19:46

Muito obrigada Pedxz funciona perfeitamente, tudo bem se nao funciona na caixa de resposta rapida, na outra funciona muito bem.

Mais uma vez obrigada, ajudou muito.
Resolvido

sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 19.08.20 20:14

Tive uma idéia!

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Botao para inserir um frame

Mensagem por sandra51 20.08.20 22:30

(Postagem fundida. Questão reaberta por @pedxz)



Detalhes da questão


Endereço do fórum: http://www.solaris-flashegrafica.com/
Versão do fórum: phpBB2

Descrição


Boa noite,
Ontem fui atendida, pelo Pedxz sobre adicionar um botao para inserir um frame.
Tinha falado que nao estava funcionando na caixa de resposta rapida, so que hoje è que vimos que funciona mas como o dropdown se abre muito acima do botao e por isto nao tinhamos visto.
Gostaria de saber se tem uma maneira de abaixar sem alterar a outra caixa de respostas normais que se abre corretamente.
Na caixa de respostas rapidas se abre assim como no print, muito acima do botao:

Botão no sceditor para adicionar um iframe Image614

Agradeço antecipadamente 

Sandra
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 20.08.20 23:21

Olá @sandra51,

Como o seu código já está personalizado ao seu gosto, poderia passar para que possa resolver o erro, agradecia Eu amo você


Aguardo uma resposta sua,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 21.08.20 0:08

Este è o codigo Pedxz:

Código:
(function($) {
    'use strict';
 
 
    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");
 
        if (!$sceditor.length) {
            return;
        }
 
        $([
                '<div class="sceditor-group fa-if-group">',
                '<a class="sceditor-button sceditor-button-if" data-sceditor-command="if" unselectable="on" title="Inserire un iframe">',
                '  <div unselectable="on" style="background-image: url(\'https://i.imgur.com/vhEqW40.png\');background-position: center center; background-size: contain;">Inserire un iframe</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function() {
                $('.sceditor-insertif').toggle();
            })
            .insertAfter('.sceditor-group:last');
 
        $([
                '<div class="sceditor-dropdown sceditor-insertif">',
                '  <div>',
                '    <label for="fa-if-input">URL</label>',
                '    <input id="fa-if-input" placeholder="https://" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputw">Larghezza </label>',
                '    <input id="fa-if-inputw" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputh">Altezza </label>',
                '    <input id="fa-if-inputh" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-if-button" value="Inserire">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .css({
                left: $('.fa-if-group').offset().left + 'px',
                top: $('.fa-if-group').offset().top + 'px',
                marginTop: '28px',
                display: 'none'
            })
            .appendTo('body');
 
        $('#fa-if-button')
            .on('click', function() {
 
                if (!$('#fa-if-input').val()) return false;
 
                $sceditor.sceditor('instance').insertText('<iframe src="' + $('#fa-if-input').val() + '" style="border:0px; width:' + ($('#fa-if-inputw').val() ? $('#fa-if-inputw').val() : 560 ) +'px ;height:' + ($('#fa-if-inputh').val() ? $('#fa-if-inputh').val() : 500 ) +'px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>');
 
                $('.sceditor-insertif').toggle();
                $('.sceditor-insertif').find('input:not([type="button"])').val('');
 
 
            });
    });
}(jQuery));
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 21.08.20 0:14

Altere para:
Código:
(function($) {
    'use strict';


    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");

        if (!$sceditor.length) {
            return;
        }

        $([
                '<div class="sceditor-group fa-if-group">',
                '<a class="sceditor-button sceditor-button-if" data-sceditor-command="if" unselectable="on" title="Inserire un iframe">',
                '  <div unselectable="on" style="background-image: url(\'https://i.imgur.com/vhEqW40.png\');background-position: center center; background-size: contain;">Inserire un iframe</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function(event) {
                event.preventDefault();
                event.stopPropagation();

                $('.sceditor-insertif').toggle();
            })
            .insertAfter('.sceditor-group:last');

        $([
                '<div class="sceditor-dropdown sceditor-insertif">',
                '  <div>',
                '    <label for="fa-if-input">URL</label>',
                '    <input id="fa-if-input" placeholder="https://" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputw">Larghezza </label>',
                '    <input id="fa-if-inputw" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputh">Altezza </label>',
                '    <input id="fa-if-inputh" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-if-button" value="Inserire">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .css({
                left: $('.fa-if-group').offset().left,
                top: $('.fa-if-group').offset().top + 1,
                display: 'none'
            })
            .appendTo('body');

        $('#fa-if-button')
            .on('click', function() {

                var regex = ['^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?', '(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d', '{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]', '\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*', '[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]', '+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]', '{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$'].join('');

                if (!(new RegExp(regex, 'i')).test($('#fa-if-input').val())) {
                    alert('Por favor, insira uma URL válida.');
                    event.preventDefault();

                    return false;
                }

                $sceditor.sceditor('instance').insertText('<iframe src="' + $('#fa-if-input').val() + '" style="border:0px; width:' + ($('#fa-if-inputw').val() ? $('#fa-if-inputw').val() : 560) + 'px ;height:' + ($('#fa-if-inputh').val() ? $('#fa-if-inputh').val() : 500) + 'px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>');

                $('.sceditor-insertif').toggle();
                $('.sceditor-insertif').find('input:not([type="button"])').val('');


            });
    });
}(jQuery));
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 21.08.20 1:26

Infelizmente nao mudou nada, ainda se abre bem longe do botao, no meio do post anterior.

Botão no sceditor para adicionar um iframe Image615
Pedxz eu percebi uma coisa, se na pagina tem poucos posts se abre no lugar certo, mas se a pagina è cheia ele sobe.
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por WizzardPT 21.08.20 2:11

Olá sandra51, tudo bem?
Poderia-me explicar melhor o que deseja fazer, estou fora do contexto..

Obrigado, espero o seu retorno Feliz
WizzardPT

WizzardPT
**

Membro desde : 17/09/2016
Mensagens : 60
Pontos : 142

http://tug4eliteforum.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 21.08.20 10:58

sandra51 escreveu:Pedxz eu percebi uma coisa, se na pagina tem poucos posts se abre no lugar certo, mas se a pagina è cheia ele sobe.

Acabei de testar em um tópico com: duas páginas cada uma com 50 e 25 postagens respetivamente e o resultado para ambas foi:

Botão no sceditor para adicionar um iframe Image14

Vou recomendar a limpeza do cache do seu navegador, caso não funcione pode passar uma conta teste - sem poderes de moderação ou administração, por favor Contente
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 21.08.20 12:18

Obrigado por responder.
Pedxz limpei os dados na cache e o resultado è sempre o mesmo, e acontece com todos no forum.

Vou te mandar por MP os dados pra voce entrar no forum.
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por RafaelS. 21.08.20 14:50

Olá @sandra51,

Altere o código para este:

Código:
(function($) {
    'use strict';
 
 
    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");
 
        if (!$sceditor.length) {
            return;
        }
 
        $([
                '<div class="sceditor-group fa-if-group">',
                '<a class="sceditor-button sceditor-button-if" data-sceditor-command="if" unselectable="on" title="Inserire un iframe">',
                '  <div unselectable="on" style="background-image: url(\'https://i.imgur.com/vhEqW40.png\');background-position: center center; background-size: contain;">Inserire un iframe</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var top = $(this).offset().top;
                var left = $(this).offset().left + 25;
                $('.sceditor-dropdown.sceditor-insertif').css({"top":top,"left":left});
                $('.sceditor-insertif').toggle();
            })
            .insertAfter('.sceditor-group:last');
 
        $([
          '<div class="sceditor-dropdown sceditor-insertif" style="display:none">',
                '  <div>',
                '    <label for="fa-if-input">URL</label>',
                '    <input id="fa-if-input" placeholder="https://" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputw">Larghezza </label>',
                '    <input id="fa-if-inputw" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <label for="fa-if-inputh">Altezza </label>',
                '    <input id="fa-if-inputh" type="number" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-if-button" value="Inserire">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .appendTo('body');
 
        $('#fa-if-button')
            .on('click', function() {
 
                var regex = ['^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?', '(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d', '{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]', '\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*', '[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]', '+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]', '{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$'].join('');
 
                if (!(new RegExp(regex, 'i')).test($('#fa-if-input').val())) {
                    alert('Por favor, insira uma URL válida.');
                    event.preventDefault();
 
                    return false;
                }
 
                $sceditor.sceditor('instance').insertText('<iframe src="' + $('#fa-if-input').val() + '" style="border:0px; width:' + ($('#fa-if-inputw').val() ? $('#fa-if-inputw').val() : 560) + 'px ;height:' + ($('#fa-if-inputh').val() ? $('#fa-if-inputh').val() : 500) + 'px !important;" frameborder="0" scrolling="no" allowtransparency="true" name="f"></iframe>');
 
                $('.sceditor-insertif').toggle();
                $('.sceditor-insertif').find('input:not([type="button"])').val('');
 
 
            });
    });
}(jQuery));

Atenciosamente,
RafaelS. King
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por sandra51 21.08.20 16:06

Olá Rafael, obrigada por responder.
Copiei o codigo e vou no forum testar, mais tarde te falo se funciona bem.

Tchau

O codigo agora funciona perfeitamente, muito obrigada pela ajuda.

RESOLVIDO
sandra51

sandra51
**

Membro desde : 08/05/2016
Mensagens : 76
Pontos : 107

http://www.solaris-flashegrafica.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Botão no sceditor para adicionar um iframe

Mensagem por tikky 21.08.20 16:53

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos