8
I only translated it, credits to Registrate o inicia tu sesión para ver este contenido | Yo solo lo traduje, créditos a Registrate o inicia tu sesión para ver este contenido
Registrate o inicia tu sesión para ver este contenido
Registrate o inicia tu sesión para ver este contenido
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: ( Seleccionar Todo )
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: ( Seleccionar Todo )
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 PHP: ( Seleccionar Todo )
.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
)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 PHP: ( Seleccionar Todo )
/********************************************
* 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: ( Seleccionar Todo )
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 PHP: ( Seleccionar Todo )
tooltip: 'Insert a video'
});
4.4 - Después añadimos
Código PHP: ( Seleccionar Todo )
/***********************
* 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'
});
4.5 - Buscamos
Código PHP: ( Seleccionar Todo )
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img');
4.6 - Lo reemplazamos por
Código PHP: ( Seleccionar Todo )
$.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 PHP: ( Seleccionar Todo )
{$code}quote|
5.2 - Lo reemplazamos por
Código PHP: ( Seleccionar Todo )
{$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 Registrate o inicia tu sesión para ver este contenido . Por supuesto necesitamos editarlo para que funcione correctamente en MyBB 1.8
Buscamos
Código: ( Seleccionar Todo )
"compatibility" => "16*"Lo reemplazamos por
Código: ( Seleccionar Todo )
"compatibility" => "16*,18*"Si usas Tapaltak y el spoiler no te funciona Registrate o inicia tu sesión para ver este contenido
Preview:
![[Imagen: FXSo1mv.png]](http://i.imgur.com/FXSo1mv.png)
Última modificación: 22 September 2014, 20:31 por Joseahfer.
