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
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]]()
![[Imagen: biggrin.gif]](http://forosmybb.es/images/smilies/biggrin.gif)
)![[Imagen: FXSo1mv.png]](http://i.imgur.com/FXSo1mv.png)
![[Imagen: 1h2XM14.png]](http://i.imgur.com/1h2XM14.png)
![[Imagen: asii.gif]](http://forostar.com/asii.gif)
![[Imagen: lQAZTws.png]](http://i.imgur.com/lQAZTws.png)
![[Imagen: 10153004_10204822111449188_6857452033812...e=5515A699]](http://scontent-b-mia.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10153004_10204822111449188_6857452033812783291_n.jpg?oh=2afc2a76064cc2a2374d10ac%E2%80%8Bfc42c219&oe=5515A699)
![[Imagen: ibrWYW73W0qxQl.png]](http://i6.minus.com/ibrWYW73W0qxQl.png)
![[Imagen: ibgrZ6zKvXBAVZ.png]](http://i.minus.com/ibgrZ6zKvXBAVZ.png)
![[Imagen: 1DTIZSy.png]](http://i.imgur.com/1DTIZSy.png)
![[Imagen: thump_9190429sd.jpg]](http://s2.subirimagenes.com/fondosycapturas/previo/thump_9190429sd.jpg)
![[Imagen: sDNBqVr.png]](http://i.imgur.com/sDNBqVr.png)