+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Tutorial: Adding Extra Function Buttons to the Editor. (/thread-12693.html)
Tutorial: Adding Extra Function Buttons to the Editor. - Ozidave - 2006-09-26
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
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
FIND: -------------------
"editor_title_close_tags",
AFTER ADD: -------------------
"editor_title_flash",
"editor_title_video",
"editor_title_quick",
"editor_title_stream",
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";
SAVE ALL FILES.
Add a suitable image (replacing flash.gif) to this path: images/codebuttons/flash.gif
That's all folks!
RE: Tutorial: Adding Extra Function Buttons to the Editor. - rhy - 2006-09-27
Great tut.. Nicely explained.
RE: Tutorial: Adding Extra Function Buttons to the Editor. - EZE - 2006-11-28
What I f I want a drop down/jump-menu-like bar?
RE: Tutorial: Adding Extra Function Buttons to the Editor. - turpentine - 2006-11-29
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?
RE: Tutorial: Adding Extra Function Buttons to the Editor. - EZE - 2006-11-29
It didn't work, the menu completely disappearers.
RE: Tutorial: Adding Extra Function Buttons to the Editor. - Manic - 2006-12-22
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:
http://img232.imageshack.us/img232/2780/screenmh5.jpgRE: Tutorial: Adding Extra Function Buttons to the Editor. - flowerhorn_vn - 2007-02-09
my code [wmp] ..[/wmp] very good , but if I want add code [flash 500:500]..[/flash]
please , help me
RE: Tutorial: Adding Extra Function Buttons to the Editor. - roi - 2007-06-30
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???????
RE: Tutorial: Adding Extra Function Buttons to the Editor. - Martin M. - 2007-06-30
You need to change this line aswell:
areaContainer.style.height = parseInt(editor.style.height)-parseInt(toolBar.style.height)-parseInt(toolbar2.style.height)-subtract+"px";areaContainer.style.height = parseInt(editor.style.height)-parseInt(toolBar.style.height)-parseInt(toolbar2.style.height)-parseInt(toolbar3.style.height)-subtract+"px";I think Ozidave forgot about that
RE: Tutorial: Adding Extra Function Buttons to the Editor. - roi - 2007-06-30
CraKteR Wrote:I think Ozidave forgot about that
He forgot the most important part
Works like it should now!
Thanks CraKterR!
