Formatting Buttons Plus

Developer

Laisvunas

3rd Party (Commercial)
Current Version: 1.1.1

License Agreement

Buy Now!

$15.00
Qty:

EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

First-party plugin HTML Formatting Buttons presupposes that it will be used inside form having id attribute “comment_form” and inside this form there will be textarea having name attribute “comment”. Formatting Buttons Plus has no such restrictions. It will output formatting buttons in any form for any field you might wish; it can even output several lines of formatting buttons on the same page. You also can add additional buttons and define the order of buttons.

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;
}

Formatting Buttons Plus Links

This entry was created November 10, 2010, 12:19 pm.
This entry was last updated October 16, 2012, 8:51 am.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

There are no reviews for this add-on yet.

What are you waiting for? Rate it and review it!