Tutorial: Adding Extra Function Buttons to the Editor.
This tutorial assumes that you have already added the MyCode in the ACP.

Adding Extra Function Buttons to the Editor.

There is another procedure for adding a single button to the existing line in the editor.. But it is suggested you don't use that option, as it will squash the existing buttons. Sad

Adding new buttons under the existing row of buttons in the editor.

Files to edit:


This is an example of how four extra buttons were added to the editor in a new line. From this you should be able to work out how to add any other buttons of your choice in a new line.

Simply replace flash, video, quick and stream with the wrapper(s) you have already created in MyCode for the function you are adding. And change this / these lines "Add an in-line flash clip" to describe your function.

Needless to say: If you are ONLY adding one button then use the three "flash" lines and delete the other three lines below each "flash" entry.

Many thanks go to CraKteR for supplying this code in the first instance.

Open editor.js

FIND: --------------------------


AFTER ADD: ------------------------

     // Create a new toolbar under the existing toolbars.
        toolbar3 = document.createElement("div");
        toolbar3.style.height = "28px";
        toolbar3.style.position = "relative";

        // Create formatting section of the new toolbar.
        toolbar3area = document.createElement("div");
        toolbar3area.style.position = "absolute";

        // Insert toolbar3area buttons.
        this.insertStandardButton(toolbar3area, "flash", "images/codebuttons/flash.gif", "flash", "", this.options.lang.title_flash);
        this.insertStandardButton(toolbar3area, "video", "images/codebuttons/video.gif", "video", "", this.options.lang.title_video);
        this.insertStandardButton(toolbar3area, "quick", "images/codebuttons/quick.gif", "quick", "", this.options.lang.title_quick);
        this.insertStandardButton(toolbar3area, "stream", "images/codebuttons/stream.gif", "stream", "", this.options.lang.title_stream);

        // Insert the new toolbar into the editor

Open functions.php

FIND: -------------------


AFTER ADD: -------------------


Open global_lang.php

FIND: ---------------------

$l['editor_title_close_tags'] = "Close any open MyCode tags that you currently have open";

AFTER ADD: -------------------

$l['editor_title_flash'] = "Add an in-line flash clip";
$l['editor_title_video'] = "Add an in-line video clip";
$l['editor_title_quick'] = "Add an in-line QuickTime video clip";
$l['editor_title_stream'] = "Add in-line streaming";


Add a suitable image (replacing flash.gif) to this path: images/codebuttons/flash.gif

That's all folks! Toungue
Great tut.. Nicely explained.
What I f I want a drop down/jump-menu-like bar?
i messed up my editor.js
anyone want to post it or something to i can just replace that and not have to redownload all of mybb?
Wii Fantastic.com
best wii forums.  forever.
It didn't work, the menu completely disappearers.
For witch version is this? I cant seem to find editor.appendChild(toolbar2); in editor.js (I am using mybb v.1.2.2)

EDIT. found it and works fine! thanx guys ;]

needless to say it works a breeze with the youtube code, something that a lot of ppl have probably wondering about.

There seems to be however a small problem with the writing space.. it gets pushed down by the toolbar and partially covers the signature dialog below..check out the pic for details:

my code [wmp] ..[/wmp] very good , but if I want add code [flash 500:500]..[/flash]
please , help me
Manic Wrote:There seems to be however a small problem with the writing space.. it gets pushed down by the toolbar and partially covers the signature dialog below..check out the pic for details:

I have exactly the same problem!!
The new Toolbar pushes down the text field. As a resuslt,in the text area also appear horizontal lines.

Removing the toolbar,everything gets back to normal.


I have searched in the templates,and also in the file Editor.js,but nowhere found an enty to modify the width and height of the textbox.

Can pleas someone help on this???????
You need to change this line aswell:
areaContainer.style.height = parseInt(editor.style.height)-parseInt(toolBar.style.height)-parseInt(toolbar2.style.height)-subtract+"px";
If your new toolbar is named toolbar3 you can change it to this:
areaContainer.style.height = parseInt(editor.style.height)-parseInt(toolBar.style.height)-parseInt(toolbar2.style.height)-parseInt(toolbar3.style.height)-subtract+"px";
Change toolbar3 to whatever the name of your toolbar is.

I think Ozidave forgot about that Smile
CraKteR Wrote:I think Ozidave forgot about that Smile

He forgot the most important part Big GrinBig GrinBig GrinBig Grin

Works like it should now!

Thanks CraKterR!Wink

Forum Jump:

Users browsing this thread: 1 Guest(s)