Ps. This only work with latest version of mybb 1.8 Beta 2 of Github
https://github.com/mybb/mybb/archive/feature.zip
https://github.com/mybb/mybb/archive/feature.zip
Ps2. If need modification in final version of mybb 1.8 to this work, i will update this tutorial, don´t worry.
Ps3. Plz, not request to me or send PM asking how to add buttons in the editor. I'll just ignore it. Please do not insist. Yes, i will made tutorial of imgur button.
Mybb 1.8 use SCEditor http://www.sceditor.com/
This one is WYSIWYG editor. So add new button is not easy, because WYSIWYG editor has WYSIWYG mode and Source mode, and mybb 1.6 editor has only source mode. That means you need to add code for both ways.
To add new button you have to edit the following files:
- root/jscripts/bbcodes_sceditor.js
- root/jscripts/sceditor/jquery.sceditor.mybb.css
- root/jscripts/sceditor/editor_themes/extrabuttons.css
- codebuttons (template)
1 - Edit root/jscripts/sceditor/jquery.sceditor.mybb.css (this used to style spoiler tag in WYSIWYG mode)
1.1 - Find
PHP Code:
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 - Add after
PHP Code:
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 - Edit root/jscripts/sceditor/editor_themes/extrabuttons.css (this is used to specify the path to the image used on the button)
2.1 - Add after all
PHP Code:
.sceditor-button-spoiler div {
background-image:url(s.png);
}
3 - Copy s.png
s.png (Size: 1.28 KB / Downloads: 102)
in root/jscripts/sceditor/editor_themes/ (you can use any image in 16x16 or use attached file)4 - Edit root/jscripts/bbcodes_sceditor.js (this used to add new command in sceditor)
4.1 - Find
PHP Code:
/********************************************
* 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 - Add after
PHP Code:
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 - Find
PHP Code:
tooltip: 'Insert a video'
});
4.4 - Add after
PHP Code:
/***********************
* 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 - Find
PHP Code:
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img');
4.6 - Replace
PHP Code:
$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img').remove('spoiler');
5 - Go to codebuttons template in ACP
5.1 - Find
PHP Code:
toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",
5.2 - Replace
PHP Code:
toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote,spoiler|maximize,source",
6 - Now you need add spoiler mycode or plugin of spoiler with description support. I recommend that use plugin because plugin is nestable and mycode is not. I recommend this one http://mods.mybb.com/view/spoiler-advance . Of course you need edit plugin to work with 1.8
Find:
Code:
"compatibility" => "16*"Replace:
Code:
"compatibility" => "1*"If you use tapatalk and has problem with spoiler-advance so read this https://support.tapatalk.com/threads/adv...ost-133893
Preview:
http://i.imgur.com/FXSo1mv.png