MyBB Codes

How to Add your MyCodes to the Editor Bar

Hi guys, this is the easiest way to add your mycodes (like hide tab, youtub tab etc) to the message toolbar, let's go:

We will need to edit these files:

- /jscripts/editor.js
- /jscripts/editor_themes/Office_2007/stylesheet.css

Step #1

Open the editor.js in notepad and search for:

Quote:[Highlight]this.options.lang.title_php}

and add a colon [,] after that. You will get like this:

Quote:[Highlight]this.options.lang.title_php},

Next, add this template line below the entire line:

Quote:[Highlight]{type: 'button', name: 'name', sprite: 'sprite', insert: 'code', title: 'alt text or tittle'}

And fill it with the following:

- name = the name of your personal code (isn't neccesary to be equal as your mybb name in the list)
- sprite = the sprite code (used to modify the css sheet)
- code = the code that will wrap the text. ([i'm talking about this] [/i'm talking about this])
- title = the alt text that will apear if you put the mouse over the picture

for example, to put a Hide code:

Quote:[Highlight]{type: 'button', name: 'hide', sprite: 'hide', insert: 'hide', title: 'Hide the Download Links'}

Save and upload the file.

Step #2

Open the stylesheet.css in Notepad and in the end of the text add these:

Quote:[Highlight].messageEditor .toolbar_button .toolbar_sprite_spritename {
background: url(images/sprite+ext) no-repeat;
}

and replace:

spritename = the sprite name that we defined in the editor code, remember? ( sprite: 'spoiler')
sprite+ext = your sprite plus extension.

And, for the hide for example:

Quote:[Highlight].messageEditor .toolbar_button .toolbar_sprite_hide {
background: url(images/hide.gif) no-repeat;
}

Save and upload.

Step #3

Well, finally, get your icon and upload into the folder: /jscripts/editor_themes/Office_2007/images/
____

Well, with this method, we can get a nicely custom text toolbar, this is my result:



Additional Notes:
To activate the office 2007 editor, Go to
Templates & Style > Select your theme name > Edit Theme Properties > Select the Editor Style

Thanks a lot for this
Is possible make this with the default editor?

For these there are so many tutorials are available for the advance facility. Then you have to do the setting then it might be work good these all information is really good to share with us.

thanks for the tip, i'll be looking into this on my dev forum

Thanks for the tutorial bro !

Thanks

hm.. Thanks Men...