Tutorial: Adding Extra Function Buttons to the Editor v2
#1
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);
			}
 
		}
	},
Reply
#2
Very nice tutorial,I was wondering if this was possible.
My Site - Support For My Themes
If you would like a Custom MyBB Theme PM me Smile.
Reply
#3
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
codiciousdesigner
codiciousdeveloper
Reply
#4
This user has been denied support. This user has been denied support.
What's prompt? Can you explain please?
Reply
#5
This is a prompt:

[Image: Window.prompt.jpg]
codiciousdesigner
codiciousdeveloper
Reply
#6
This user has been denied support. This user has been denied support.
i can't find jscripts/editor_themes/YOUR_EDITOR_THEME/images/.

Any Video Tutorial of this thread
Reply
#7
This user has been denied support. This user has been denied support.
(2011-10-02, 04:36 PM)Bapun Raz Wrote: ^Its in your FTP.

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

EDIT: I can confirm that this works perfectly for 1.6.7
Reply
#9
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
Reply
#10
why post that here? this thread is not related to chkeditor
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)