MyBB Community Forums

A simple way to adding a button in SCEditor. Tested in Mybb 1.8.4 .

First of all see Screenshots .

If you want this button then you must work step by step with me

1 : go to jscripts/bbcodes_sceditor.js

open it and find

$.sceditor.command.set('video',

and add before that

/* + Midori + */ $.sceditor.command.set('midori', {
/* + Midori + */ _dropDown: function (editor, caller) {
/* + Midori + */ var $content;
/* + Midori + */ $content = $(
/* + Midori + */ '<div>' +
/* + Midori + */ '<label for="midori">' + editor._('Name') + '</label> ' +
/* + Midori + */ '<input type="text" id="midori" />' +
/* + Midori + */ '</div>' +
/* + Midori + */ '<div>' +
/* + Midori + */ '<label for="link">' + editor._('Link:') + '</label> ' +
/* + Midori + */ '<input type="text" id="midoriurl" value="http://" />' +
/* + Midori + */ '</div>' +
/* + Midori + */ '<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
/* + Midori + */ );
/* + Midori + */ $content.find('.button').click(function (e) {
/* + Midori + */ var    val = $content.find('#midori').val();
/* + Midori + */ midoriurl  = $content.find('#midoriurl').val();
/* + Midori + */ if(val) {
/* + Midori + */ editor.focus();
/* + Midori + */ editor.insert('[midori='+val+']'+midoriurl+'[/midori]');
/* + Midori + */ editor.closeDropDown(true);
/* + Midori + */ e.preventDefault();
/* + Midori + */ }
/* + Midori + */ });
/* + Midori + */ editor.createDropDown(caller, 'midori', $content);
/* + Midori + */ },
/* + Midori + */ exec: function (caller) {
/* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller);
/* + Midori + */ },
/* + Midori + */ txtExec: function (caller) {
/* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller);
/* + Midori + */ },
/* + Midori + */ tooltip: 'Midori'
/* + Midori + */ });

*change "midori" with your button name.
2 : go to jscripts/sceditor/editor_themes/mybb.css
and find

/* Additional buttons (for MyBB) */
.sceditor-button-video div  {
  background-image: url(video.png);
}

add below codes after that

/* + Midori + */ .sceditor-button-midori div  {
/* + Midori + */ background-image: url(midori.png);
/* + Midori + */ }

3 : go to "codebuttons" template
and find

{$code}quote|

replace below codes with that

{$code}quote|midori|

4 : in finally upload your image in 16x16 size in jscripts/sceditor/editor_themes folder

image for test: [attachment=34174]

5 : now you can make your Mycode for your editor.

That's it .

source : http://www.midorinco.ir/showthread.php?tid=1602

nice tutorial this help too many users

I was looking for this customization...

Thank you very much

+1

I followed these instructions step by step, but my button shows a YouTube symbol instead of my test image, and does nothing on click. (The hovertext is right, at least?)

Can anyone else confirm that this works as described?

e: Okay, I figured out a better way, I'm gonna post an updated tutorial.

I tried to use this guide to insert the spoiler button but it does not show up in the editor.