Tutorial: Adding Extra Function Buttons to the Editor.

[Ozidave]

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.

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

Files to edit:

editor.js
functions.php
global_lang.php


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

Code:

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

editor.appendChild(toolbar2);

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";
        toolbar3.appendChild(toolbar3area);

        // 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
        editor.appendChild(toolbar3);

Open functions.php

Code:

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

                 "editor_title_close_tags",

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

                  "editor_title_flash",
                  "editor_title_video",
                  "editor_title_quick",
                  "editor_title_stream",

Open global_lang.php

Code:

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";

SAVE ALL FILES.

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

That's all folks!

[rhy]

Great tut.. Nicely explained.

[EZE]

What I f I want a drop down/jump-menu-like bar?

[turpentine]

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?

[EZE]

It didn't work, the menu completely disappearers.

[Manic]

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:

Code:

http://img232.imageshack.us/img232/2780/screenmh5.jpg

[flowerhorn_vn]

my code [wmp] ..[/wmp] very good , but if I want add code [flash 500:500]..[/flash]
please , help me

[rcpalace]

What is the mycode for this coding?? Any help will be appreciated.
thanks

[roi]

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???????

[CraKteR]

You need to change this line aswell:

PHP Code:

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:

Code:

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