Tutorial: Agregar boton de Spoiler a Mybb Editor Final

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]

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]

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

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]

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

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]

Gracias por el tutorial, a darle uso ! Big Grin

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

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

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