Botão no sceditor para adicionar um iframe

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

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.

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



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.

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


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));

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

Tópico resolvido Movido para "Questões resolvidas".

(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:



Agradeço antecipadamente 

Sandra

Olá @sandra51,

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


Aguardo uma resposta sua,
pedxz.

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));

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));

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


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

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

Obrigado, espero o seu retorno

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:


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

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.

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.

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



O codigo agora funciona perfeitamente, muito obrigada pela ajuda.

RESOLVIDO