devot:eeDevoted to ExpressionEngine

THE TAG {exp:format_buttons_plus}

This tag has following parameters:

1) form_id - required. Allows you to specify HTML “id” attribute of the form element.

2) field_name required. Allows you to specify HTML “name” attribute of the form field element.

3) multiple - optional. Allows you to specify if you are using more than one instance of
Format Buttons Plus on single template. Possible values are “yes” and “no”. Default value
is “no”.

4) new_button_label - optional. Allows you to define the label of new button. This parameter
supports pipe operator, i.e. you can define button labels for several new buttons. E.g.

new_button_label="<sup>|<sub>"

5) new_button_opener - optional. Allows you to define opening tag of new button. This parameter
supports pipe operator, i.e. you can define opening tags for several new buttons.E.g.

new_button_opener="<sup>|<sub>"

6) new_button_closer - optional. Allows you to define closing tag of new button. This parameter
supports pipe operator, i.e. you can define closing tags for several new buttons. E.g.

new_button_closer="</sup>|</sub>"

7) new_button_title - optional. Allows you to define title of new button. This parameter
supports pipe operator, i.e. you can define titles for several new buttons. E.g.

new_button_title="Superscripted text|Subscripted text"

8) button_order - optional. Allows you to define order of buttons by providing pipe delimited
list of button labels. E.g.

button_order="<del>|quote|<sub>|<sup>|<b>|<i>"

Notice 1. You can remove buttons by not including its labels into pipe delimited list of “button_order” parameter.

Notice 2. Buttons “email”, “link” and “close all” are hardcoded in “HTML buttons” library which is used by this add-on
and therefore cannot be removed or placed differently. Button “close all” can be removed using EE config variable “remove_close_all_button”.

USAGE

Add the tag {exp:format_buttons_plus} inside your template above needed form field element:

<form id="comment_on_something_form">

{exp:format_buttons_plus form_id="comment_on_something_form" field_name="comment_on_something"}

<textarea name="comment_on_something"></textarea>
 
</form>

If you need several lines of formatting buttons on your page, then add “multiple” parameter to each {exp:format_buttons_plus} tag:

<form id="comment_on_something_form">

{exp:format_buttons_plus form_id="comment_on_something_form" field_name="comment_on_something" multiple="yes"}

<textarea name="comment_on_something"></textarea>

{exp:format_buttons_plus form_id="comment_on_something_form" field_name="comment_on_something2" multiple="yes"}

<textarea name="comment_on_something2"></textarea>
 
</form>

To add new buttons or/and to change buttons order use the code as this:

<form id="comment_on_something_form">

{exp:format_buttons_plus form_id="comment_on_something_form" field_name="comment_on_something" new_button_label="<sup>|<sub>" new_button_opener="<sup>|<sub>" new_button_closer="</sup>|</sub>" new_button_title="Superscripted text|Subscripted text" button_order="<del>|quote|<sub>|<sup>|<b>|<i>"}

<textarea name="comment_on_something"></textarea>
 
</form>

Notice: You must add the following CSS to your stylesheet in order to style the buttons:

/* Format Buttons Plus */  

.buttonMode {
 font-family:       Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
 font-size:         10px;
 color:             #73769D;
 background-color:  transparent; 
 white-space:         nowrap;
}

.htmlButtonOuter, .htmlButtonOuterL {
 background-color:  #f6f6f6;  
 padding:           0;
 border-top:        #333 1px solid;
 border-right:      #333 1px solid;
 border-bottom:     #333 1px solid;
}
.htmlButtonOuterL  {
 border-left:       #333 1px solid;
}
.htmlButtonInner {
 background-color:  transparent; 
 text-align:        center;
 padding:            0 3px 0 3px;
 border-left:       #fff 1px solid;
 border-top:        #fff 1px solid;
 border-right:      #ccc 1px solid;
 border-bottom:     #ccc 1px solid;
}
.htmlButtonOff {
 font-family:       Verdana, Arial, Trebuchet MS, Tahoma, Sans-serif;
 font-size:         11px;
 font-weight:       bold;
 padding:           1px 2px 2px 2px;
 white-space:       nowrap;
}
.htmlButtonOff a:link { 
 color:             #000;
 text-decoration:   none;
 white-space:       nowrap;
}
.htmlButtonOff  a:visited { 
 text-decoration:   none;
}
.htmlButtonOff a:active { 
 text-decoration:   none;
 color:             #999;
}
.htmlButtonOff a:hover { 
 background-color:    #fff;
 text-decoration:   none;
 color:             #999;
}
.htmlButtonOn {
 font-family:       Verdana, Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
 font-size:         11px;
 font-weight:       bold;
 background:        #f6f6f6;
 padding:           1px 2px 2px 2px;
 white-space:       nowrap;
}
.htmlButtonOn a:link { 
 color:             #990000;
 text-decoration:   none;
 white-space:       nowrap;
}  
.htmlButtonOn  a:visited { 
 text-decoration:   none;
} 
.htmlButtonOn a:active { 
 text-decoration:   none;
 color:             #999;
}
.htmlButtonOn a:hover { 
 background-color:    #fff;
 color:             #999;
 text-decoration:   none;
}