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 :
Replacement :
Title : Extended Highlight
Short Description : Highlight with your color
Regular Expression :
Replacement :
jscripts/editor.js
find:
Replace with:
find:
Insert before:
find:
insert before:
find:
insert after:
jscripts/editor_themes/default/stylesheet.css
find:
replace with:
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]( "Big Grin")
MyCode
Title : Simple Highlight
Short Description : Simple Highlight using default
Regular Expression :
Code:
\[hl\](.*?)\[/hl\]Code:
<span class="highlight">$1</span>Title : Extended Highlight
Short Description : Highlight with your color
Regular Expression :
Code:
\[hl=\"?\#?([a-f0-9]{6})\"?\](.*?)\[/hl\]Code:
<span style="background: #$1;padding-top: 3px;padding-bottom: 3px;">$2</span>jscripts/editor.js
find:
Code:
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}Code:
{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:
Code:
createToolbarContainer: function(name)
{Code:
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:
Code:
insertList: function(type)
{Code:
insertHighlight: function(color)
{
selectedText = this.getSelectedText($(this.textarea));
if(!selectedText) {
selectedText = '';
}
this.performInsert("[hl="+color+"]"+selectedText+"[/hl]", "", true, false);
},find:
Code:
case "video":
this.insertVideo(extra);
break;Code:
case "highlight":
this.insertHighlight(extra);
break;jscripts/editor_themes/default/stylesheet.css
find:
Code:
.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;
}Code:
.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]](http://i.imgur.com/jrZeNTf.gif)
Feel free to create a better icon and share it, I'm not an artist
