MyBB Community Forums

Full Version: Tutorial: Adding Extra Function Buttons to the Editor v2
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
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.

{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()Wink.

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);
			}
 
		}
	},
Very nice tutorial,I was wondering if this was possible.
Oh, that isn't really nice - Copy&Paste my tutorial from MyBB Community and don't give credits.

Next time write your own tutorial or ask me. Wink
What's prompt? Can you explain please?
This is a prompt:

[Image: Window.prompt.jpg]
i can't find jscripts/editor_themes/YOUR_EDITOR_THEME/images/.

Any Video Tutorial of this thread
(2011-10-02, 04:36 PM)Bapun Raz Wrote: [ -> ]^Its in your FTP.

This is a right ways
[Image: 76553310.png]
Does this method work in 1.6.7?

EDIT: I can confirm that this works perfectly for 1.6.7
Guys, I installed the CHKEditor and I would like to know how exactly I can get Shortcuts for embedding Videos for Youtube, Vimeo, Dailymotion and Facebook.

I am not so nerdy with the whole scripting so I would appreciate if someone could tell me exactly to do that.

Thanks in advance. Any help is appreciated.

Wolfseye
why post that here? this thread is not related to chkeditor
Pages: 1 2 3