2011-06-04, 09:08 PM
This time the tutorial is for MyBB 1.4.X and MyBB 1.6.X.
You can add in MyBB easily MyCodes to the forum, but if you want to add a button for this MyCode to your editor you have to edit some code of the MyBB editor.
1. Open jscripts/editor.js in an editor like Notepad++.
2. Search for line 214 or the following code.
3. Add a comma after the code and make a new line. Add into the new line the following code. I choosed for this example a spoiler button.
4. Enter in “name” an unique name for your button, enter in “insert” the mycode to insert (without [][/]), in image the image of your button and in title the title of your button.
5. Upload now your button image to jscripts/editor_themes/YOUR_EDITOR_THEME/images/.
6. That’s it. Now your button should work.
If you want you can also insert a prompt for the button:
7. Search for:
7.1 Add after it
Not forget: Replace spoiler with your button’s name and change also the function’s name (this.insertSpoiler().
7.2 Search for:
7.3 Add after it:
You can add in MyBB easily MyCodes to the forum, but if you want to add a button for this MyCode to your editor you have to edit some code of the MyBB editor.
1. Open jscripts/editor.js in an editor like Notepad++.
2. Search for line 214 or the following code.
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}
3. Add a comma after the code and make a new line. Add into the new line the following code. I choosed for this example a spoiler button.
{type: 'button', name: 'spoiler', insert: 'spoiler', image: 'spoiler.png', title: 'Spoiler'}
4. Enter in “name” an unique name for your button, enter in “insert” the mycode to insert (without [][/]), in image the image of your button and in title the title of your button.
5. Upload now your button image to jscripts/editor_themes/YOUR_EDITOR_THEME/images/.
6. That’s it. Now your button should work.
- Inserting a Prompt -
If you want you can also insert a prompt for the button:
7. Search for:
case "video":
this.insertVideo(extra);
break;
7.1 Add after it
case "spoiler":
this.insertSpoiler();
break;
Not forget: Replace spoiler with your button’s name and change also the function’s name (this.insertSpoiler().
7.2 Search for:
insertVideo: function(type)
{
selectedText = this.getSelectedText($(this.textarea));
if(!selectedText)
{
url = prompt(this.options.lang.enter_video_url, "http://");
}
else
{
url = selectedText;
}
if(url)
{
this.performInsert("[video="+type+"]"+url+"[/video]", "", true, false);
}
this.setDropDownMenuActiveItem($('editor_item_video'), 0);
},
7.3 Add after it:
insertSpoiler: function()
{
selectedText = this.getSelectedText($(this.textarea));
title = prompt("Please enter a title for your spoiler.", "");
if(title)
{
if(!selectedText)
{
text = prompt("Enter a text for your spoiler.", "");
}
else
{
text = selectedText;
}
if(title && text)
{
this.performInsert("[spoiler="+title+"]"+text+"[/spoiler]", "", true, false);
}
}
},