[Tut] How to Add your MyCodes to the Editor Bar?

[Tut] How to Add your MyCodes to the Editor Bar? - Printable Version

+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: Mods Database (/forumdisplay.php?fid=4)
+--- Forum: Tutorials for 1.4.x (/forumdisplay.php?fid=29)
+--- Thread: [Tut] How to Add your MyCodes to the Editor Bar? (/showthread.php?tid=1384)

[Tut] How to Add your MyCodes to the Editor Bar? - shinekwt - 07-14-2010 05:33 AM

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:
[Image: 14103k2.jpg]

Additional Notes:
To activate the office 2007 editor, Go to
Templates & Style > Select your theme name > Edit Theme Properties > Select the Editor Style
[Image: 2w3ud8y.jpg]

RE: [Tut] How to Add your MyCodes to the Editor Bar? - alvarorojas4 - 07-19-2010 01:12 PM

Thanks a lot for this Smile

Is possible make this with the default editor?

RE: [Tut] How to Add your MyCodes to the Editor Bar? - helsalee - 07-22-2010 05:42 AM

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.

RE: [Tut] How to Add your MyCodes to the Editor Bar? - Richard.R - 09-15-2010 09:50 AM

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

RE: [Tut] How to Add your MyCodes to the Editor Bar? - Ansar Bajwa - 09-20-2010 06:04 AM

Thanks for the tutorial bro !

RE: [Tut] How to Add your MyCodes to the Editor Bar? - Cr4sh - 10-16-2010 01:01 PM

Thanks

RE: [Tut] How to Add your MyCodes to the Editor Bar? - _Un!corn - 08-08-2011 09:09 AM

hm.. Thanks Men...