Super simple instructions to add your click-to-add-your-MyCode buttons

Spartak · February 10 - 10:25

Super simple instructions to add your click-to-add-your-MyCode buttons

This is for real basic buttons. You just click it and the MyCode is slapped down in the editor, around selected text if applicable. 
 
This tutorial only covers the editor buttons. You'll have to work out the actual MyCode yourself. 
 
Step 1: The Code 
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">/*YourCode button*/
$.sceditor.command.set("YourCode", {
_dropDown: function (editor, caller) {
var $content;

$content = $(
'<div>' +
'<div>' +
'<label for="YourCode">' + editor._('YourCode') + ':</label> ' +
'<textarea type="text" id="YourCode"></textarea>' +
'</div>' +
'<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>' +
'</div>'
);

setTimeout(function () {
$content.find('#YourCode').trigger('focus');
}, 100);

$content.find('.button').on('click', function (e) {
var val = $content.find('#YourCode').val(),
before = '[YourCode]',
end = '[/YourCode]';

if (val) {
before = before + val + end;
end = null;
}

editor.insert(before, end);
editor.closeDropDown(true);
e.preventDefault();
});

editor.createDropDown(caller, 'insertYourCode', $content.get(0));
},
exec: function (caller) {
if ($.trim(this.getRangeHelper().selectedRange())) {
this.insert('[YourCode]', '[/YourCode]');
return;
}
$.sceditor.command.get('YourCode')._dropDown(this, caller);
},
txtExec: ['[YourCode]', '[/YourCode]'],
tooltip: 'YourCode'
});
/*YourCode button*/</code></pre> 
Take this, replace "YourCode" with the name of your MyCode. The tooltip bit at the end is help text, so change that to be as descriptive and helpful as you think it should be. 
 
If your code takes parameters in the first tag (such as how [img] tags can be [img=widthxheight]), replace every instance of [YourCode] in brackets like that with [YourCode=Suggested Parameter]. 
 
(This is, essentially, a complete lift of the existing "[code] tags button" code. If something is wrong, such as you're reading this post years in the future and it's not MyBB 1.8.5 anymore, dig up your existing version of that code and see if you can figure out how to update.) 
 
Step 2: Actually Implementing The Code 
The file you're looking for is, by default, [your mybb folder]/jscripts/bbcodes_sceditor.js . 
 
Find the bit in there where there are a bunch of blocks starting with $.sceditor.command.set("[something or another]"), and insert your modified code in there alongside them. 
 
Step 3: The Button 
ACP -> Templates -> Search/Replace -> Scroll down to "Search Template Titles", and find "codebuttons". 
 
In every non-Master template that comes up, edit the codebuttons template and find the line that looks approximately like this: 
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",</code></pre>Assuming you've done no modifications, this represents the default toolbar: 
<img src="

Please, Log in or Register to view URLs content!

" data-original-url="https://cdn.discordapp.com/attachments/796134868828160030/818914717371990046/unknown.png" loading="lazy" alt="[Image: unknown.png]" class="mycode_img" /> 
 
You can probably figure out which bits refer to which buttons. Commas divide buttons, and pipes | divide groups of buttons, and {templates} are a bunch of predefined pipes and buttons all together. Figure out where you want your button to appear and insert YourCode accordingly. 
 
Save, open up a new post, and hard refresh. Congratulations, you've got a YouTube button that inserts your MyCode! ... Wait. 
 
Step 3.5: The Button Image 
First, get yourself a 16x16 image that represents your MyCode. I'm no artist, so I can't help you with this part. Do not put spaces in the image name, it screws things up. There's probably a way to fix that but I don't know it. 
 
Then, head on to [your mybb folder]/jscripts/sceditor/themes/. Put your image into that folder, but don't go anywhere just yet, cause we've got CSS to edit. 
 
mybb.css is the default sceditor theme. If any of your themes use a different one (check in ACP -> Themes -> [Some Theme] -> scroll down to "Editor Style"), edit those as well. 
 
In every file you're editing, scroll down to the bottom and add the following: 
 
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.sceditor-button-YourCode div {
background-image: url(YourImage.png)
}</code></pre>... replacing YourCode with the name of your MyCode and YourImage.png with the name of your image, of course. 
 
Go back to the new post page and hard refresh again. 
 
<img src="

Please, Log in or Register to view URLs content!

" data-original-url="https://cdn.discordapp.com/attachments/796134868828160030/818917686452682762/unknown.png" loading="lazy" alt="[Image: unknown.png]" class="mycode_img" /> 
 
Rejoice.

Please, Log in or Register to view URLs content!

Super simple instructions to add your click-to-add-your-MyCode buttons

Spartak

Well-known member