Tutorial: Agregar boton de Spoiler a Mybb Editor Final

garubostar 21 Nov, 2014, 9:37 pm

martec | Yo solo lo traduje, créditos a martec
Original thread

Añadir el tag spoiler con descripción

Necesitaremos editar estos archivos.

root/jscripts/bbcodes_sceditor.js
root/jscripts/sceditor/jquery.sceditor.mybb.css
root/jscripts/sceditor/editor_themes/mybb.css
codebuttons (plantilla)

1 - Editamos root/jscripts/sceditor/jquery.sceditor.mybb.css (para darle el estilo a la etiqueta spoiler)

1.1 - Buscamos

Código PHP:

Código:
blockquote cite {

 font-weight: bold;

 font-style: normal;

 display: block;

 font-size: 1em;

 border-bottom: 1px solid #ccc;

 margin-bottom: 10px;

 padding-bottom: 3px;

}

1.2 - Después añadimos

Código PHP:

Código:
blockquote.spoiler:before {

 position: absolute;

 content: 'SPOILER:';

 top: -1.35em;

 left: 0;

 font-size: 0.8em;

 display: block;

 text-align: left;

 font-weight: bold;

}

blockquote.spoiler {

 margin-top: 1.5em;

 background-color: #F5F5F5; 

}

2 - Editamos root/jscripts/sceditor/editor_themes/mybb.css

2.1 - Añadimos después de todo

Código:
.sceditor-button-spoiler div {

  background-image:url(s.png);

}

2.2 - Repetimos los pasos anteriores con todos los temas del editor(si tenemos, que por defecto no, creo [Imagen: biggrin.gif]

)

3 - Copiamos s.png en root/jscripts/sceditor/editor_themes/ (Usad cualquier imagen de 16x16 si no queréis usar la que pongo aquí)

4 - Editamos root/jscripts/bbcodes_sceditor.js (Para añadir un nuevo comando en el nuevo editor)

4.1 - Buscamos

Código:
/********************************************

 * Update quote to support pid and dateline *

 ********************************************/

 $.sceditor.plugins.bbcode.bbcode.set('quote', {

 format: function(element, content) {

 var author = '',

 $elm  = $(element),

 $cite = $elm.children('cite').first();

4.2 - Después añadimos

Código PHP:

Código:
if ($(element[0]).hasClass('spoiler')) {

                var desc = '';

                if($cite.length === 1 || $elm.data('desc')) {

 desc = $elm.data('desc') || $cite.text() ;

 $elm.data('desc', desc);

 $cite.remove();

 content = this.elementToBbcode($(element));

 desc  = '=' + desc;

 $elm.prepend($cite);

                }

                return '[spoiler' + desc + ']' + content + '[/spoiler]';

            }

4.3 - Buscamos

Código:
tooltip: 'Insert a video'

 }); 

4.4 - Después añadimos

Código:
/***********************

     * Add Spoiler command *

     ***********************/

    $.sceditor.plugins.bbcode.bbcode.set("spoiler", {

        allowsEmpty: true,

        isInline: false,    

        format: function(element, content) {

            var desc = '',

                $elm = $(element),

                $cite = $elm.children('cite').first();

            if($cite.length === 1 || $elm.data('desc')) {

                desc = $elm.data('desc') || $cite.text() ;

                $elm.data('desc', desc);

                $cite.remove();

                content = this.elementToBbcode($(element));

                desc = '=' + desc;

                $elm.prepend($cite);

            }

            return '[spoiler' + desc + ']' + content + '[/spoiler]';

        },

        html: function (token, attrs, content) {

 var data = '';

            if (attrs.defaultattr) {

                content = '<cite>' + attrs.defaultattr + '</cite>' + content;

 data += ' data-desc="' + attrs.defaultattr + '"';

            }

            return '<blockquote' + data + ' class="spoiler">' + content + '</blockquote>';

        },

        breakStart: true,

        breakEnd: true

    });

    $.sceditor.command.set("spoiler", {

        _dropDown: function (editor, caller, html) {

            var $content;

            $content = $(

                '<div>' +

                    '<label for="des">' + editor._('Description (optional):') + '</label> ' +

                    '<input type="text" id="des" />' +

                '</div>' +

                '<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'

            );

            $content.find('.button').click(function (e) {

                var    description = $content.find('#des').val(),

                    descriptionAttr = '',

                    before = '[spoiler]',

                    end = '[/spoiler]';

                if (description) {

                   descriptionAttr = '=' + description + '';

                   before = '[spoiler'+ descriptionAttr +']';

                }

                if (html) {

                    before = before + html + end;

                    end    = null;

                }

                editor.insert(before, end);

                editor.closeDropDown(true);

                e.preventDefault();

            });

            editor.createDropDown(caller, 'insertspoiler', $content);

        },        

        exec: function (caller) {

            $.sceditor.command.get('spoiler')._dropDown(this, caller);

        },

        txtExec: function (caller) {

            $.sceditor.command.get('spoiler')._dropDown(this, caller);

        },

    tooltip: 'Insert a spoiler'

});

Código:
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img'); 

4.6 - Lo reemplazamos por

Código:
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img').remove('spoiler'); 

5 - Vamos a la plantilla codebuttons en el panel de Admin

5.1 - Buscamos

Código:
{$code}quote| 

5.2 - Lo reemplazamos por

Código:
{$code}quote,spoiler| 

Si tu usas Quick Advanced Editor (v 4.0.0 o más nueva) o Quick Advanced Editor Plus (v 0.6 o más nueva)

Repite los pasos 5.1 y 5.2 en Plantillas Globales » codebutquick

6 - Ahora necesitamos añadir el MyCode del spoiler o un plugin que traiga descripciones. Recomiendo usar el plugin porque es más estable que el MyCode. Recomiendo esto http://mods.mybb.com/view/spoiler-advance . Por supuesto necesitamos editarlo para que funcione correctamente en MyBB 1.8

Buscamos

Código:
"compatibility" => "16*"

Lo reemplazamos por

Código:
"compatibility" => "16*,18*"

Si usas Tapaltak y el spoiler no te funciona https://support.tapatalk.com/threads/advanced-spoiler-not-work-in-mybb.19360/#post-133893

[Imagen: FXSo1mv.png]

XEDE 23 Nov, 2014, 12:34 pm

Buen tutorial, tal vez lo use ya que me falta ese botón aunque ahora no me acuerdo que spoiler tengo en uso jajaja Big Grin

[Imagen: http://i.imgur.com/CCoBXgK.png]
[Imagen: http://i.imgur.com/TQqCgcO.png]

garubostar 24 Nov, 2014, 4:35 pm

(23 Nov, 2014, 12:34 pm)XEDE escribió: Buen tutorial, tal vez lo use ya que me falta ese botón aunque ahora no me acuerdo que spoiler tengo en uso jajaja

Pues en el tuto que vi estaba en ingles y tenia alguno detalles q con ayuda de un amigo arreglamos, Si deseas puedes pasarte por mi sitio y mira que tal se ve, Te dejo una Cuenta DEMO para que pruebe y me avises que mas le podria agregar al sitio.

http://warezlinks.zz.vc
user: DEMO
Pass: demopass

Última modificación: 24 Nov, 2014, 4:36 pm por garubostar.

XEDE 24 Nov, 2014, 8:07 pm

jaaja gracias, ahora estoy viendo un problema con los links que se comparten en facebook -.- cuando termine con eso veo si agrego este boton, ya que ahora ando con poco tiempo -.- xD

[Imagen: http://i.imgur.com/CCoBXgK.png]
[Imagen: http://i.imgur.com/TQqCgcO.png]

gambetta 14 Feb, 2015, 9:52 am

que tal chicos, miren seguí al pie de la letra este tutorial, pero no me aparece el boton "S" en el editor, por favor diganme que puede estar pasando

XEDE 23 Feb, 2015, 1:43 pm

En mi caso todavía no probé este tutorial ya que ando sin tiempo, usas el spoiler que indica en el tutorial? o usas otro codigo/plugin?

[Imagen: http://i.imgur.com/CCoBXgK.png]
[Imagen: http://i.imgur.com/TQqCgcO.png]

iNFAMOUS 24 Feb, 2015, 6:46 pm

Gracias por el tutorial, a darle uso ! Big Grin

gambetta 15 May, 2015, 6:50 pm

Editamos root/jscripts/sceditor/jquery.sceditor.mybb.css
lo que esta rojo no lo encuentro

AndresXZ09 15 May, 2015, 7:22 pm

Puede ser por tu versión de MyBB o bien porque eliminaste el archivo de manera accidental o quizás nunca lo tuviste xd

Kevin Alfonso 6 Dec, 2015, 2:00 pm

#10

yo tampoco encuentro jquery.sceditor.mybb.css y no lo elimine