Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Add an "Highlight text" button
#1
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
[Image: jrZeNTf.gif]

Feel free to create a better icon and share it, I'm not an artist Big Grin
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#2
You should probably make this into a plugin Smile I understand what you did it's just a lot of work to implement.
Hey Everyone I am back! I will slowly be in progression of helping you all with your questions!


Reply
#3
(06-05-2014, 02:32 PM)Ace700 Wrote: You should probably make this into a plugin Smile 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 Smile
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)