MyBB Community Forums

Some users ask me for an highlight button in the editor, so I did it. And now explain it.

MyCode
Title : Simple Highlight
Short Description : Simple Highlight using default
Regular Expression :

\[hl\](.*?)\[/hl\]

Replacement :

<span class="highlight">$1</span>

Title : Extended Highlight
Short Description : Highlight with your color
Regular Expression :

\[hl=\"?\#?([a-f0-9]{6})\"?\](.*?)\[/hl\]

Replacement :

<span style="background: #$1;padding-top: 3px;padding-bottom: 3px;">$2</span>

jscripts/editor.js
find:

{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

Replace with:

{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors},
				{type: 'button', name: 'highlight', insert: 'highlight', dropdown: true, color_select: true, image: 'highlight.gif', draw_option: this.drawHighlightOption, options: this.colors}

find:

createToolbarContainer: function(name)
	{

Insert before:

	drawHighlightOption: function(option)
	{
		var item = document.createElement('li');
		item.extra = option.value;
		item.className = 'editor_dropdown_color_item';
		item.innerHTML = '<a style="background-color: '+option.value+'"></a>';
		return item;
	},

find:

insertList: function(type)
	{

insert before:

	insertHighlight: function(color)
	{
		selectedText = this.getSelectedText($(this.textarea));
		if(!selectedText) {
			selectedText = '';
		}
		this.performInsert("[hl="+color+"]"+selectedText+"[/hl]", "", true, false);
	},

find:

			case "video":
				this.insertVideo(extra);
				break;

insert after:

			case "highlight":
				this.insertHighlight(extra);
				break;

jscripts/editor_themes/default/stylesheet.css
find:

.messageEditor .toolbar_button_color .editor_dropdown_menu {
	width: 153px;
	height: 98px;	
	padding: 1px;
	background: #EFEFEF;
	margin-left: -1px;
}

.messageEditor .toolbar_button_color li.editor_dropdown_color_item {
	float: left;
	padding: 3px;
	margin: 1px;
	width: 11px;
	height: 11px;
}

.messageEditor .toolbar_button_color a {
	width: 9px;
	height: 9px;
	display: block;
	border: 1px solid #FFF;
}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_active {
	background: #81A2C4;
}

.messageEditor .toolbar_button_color {
	position: relative;
}

.messageEditor .toolbar_button_video {
	position: relative;
}

.messageEditor .editor_button_color_selected {
	position: absolute;
	z-index: 100;
	width: 16px;
	height: 4px;
	top: 15px;
	left: 3px;
	display: block;
	background: transparent;
}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_over {
	border: 1px solid #5296f7;
	background: transparent;
	margin: 0px;	
}

replace with:

.messageEditor .toolbar_button_color .editor_dropdown_menu, .messageEditor .toolbar_button_highlight .editor_dropdown_menu {
	width: 153px;
	height: 98px;	
	padding: 1px;
	background: #EFEFEF;
	margin-left: -1px;
}

.messageEditor .toolbar_button_color li.editor_dropdown_color_item , .messageEditor .toolbar_button_highlight li.editor_dropdown_color_item {
	float: left;
	padding: 3px;
	margin: 1px;
	width: 11px;
	height: 11px;
}

.messageEditor .toolbar_button_color a, .messageEditor .toolbar_button_highlight a {
	width: 9px;
	height: 9px;
	display: block;
	border: 1px solid #FFF;
}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_active, .messageEditor .toolbar_button_highlight li.editor_dropdown_menu_item_active {
	background: #81A2C4;
}

.messageEditor .toolbar_button_color , .messageEditor .toolbar_button_highlight {
	position: relative;
}

.messageEditor .toolbar_button_video {
	position: relative;
}

.messageEditor .editor_button_color_selected {
	position: absolute;
	z-index: 100;
	width: 16px;
	height: 4px;
	top: 15px;
	left: 3px;
	display: block;
	background: transparent;
}

.messageEditor .toolbar_button_color li.editor_dropdown_menu_item_over, .messageEditor .toolbar_button_highlight li.editor_dropdown_menu_item_over {
	border: 1px solid #5296f7;
	background: transparent;
	margin: 0px;	
}

jscripts/editor_themes/default/images/highlight.gif


Feel free to create a better icon and share it, I'm not an artist

You should probably make this into a plugin I understand what you did it's just a lot of work to implement.

(2014-06-05, 02:32 PM)Ace700 Wrote: [ -> ]You should probably make this into a plugin I understand what you did it's just a lot of work to implement.

I'll propably do, if I succeed in finding a way to extend the editor.js file to add the modifications I need without modifying the original source.
I know the way I currently use is the brutal one and quite deprecated, but it will be corrected