Examples
Custom Buttons
You can see the new buttons added after the separator in the toolbar.
Froala WYSIWYG HTML Editor covers a lot of functionalities through the default buttons. You may need buttons with another behavior to be integrated in the toolbar. This can be done by using the customButtons
and buttons
options.
The customButtons
is an Object that defines the new buttons. The key of each property represents the name of the new button and its value specifies how the button should behave in the rich text editor. It is important to have unique names for the buttons or they will not work properly. The value is also an Object that has 4 fields: title
, icon
, callback
and refresh
. A generic property of the customButtons Object would look like:
name: { title: 'Title', icon: { type: 'icon-type', value: 'icon-value' }, callback: function () { // Do something here ... }, refresh: function () { // This method is called when the button state might have been changed. } }
title
is the tooltip that appears when you go with mouse over a button. If you are using a translation, you have to make sure that you add it to the translation array of the language you are using. See languages for more details.
icon
is the icon of the button. It has 2 properties that need to be set: type
and value
.
- type can be one of the following options:
font
(Font Awesome Icon),txt
(Simple text) orimg
(Image). - value has to be a Font Awesome class
fa fa-*
, a character fortxt
or an URL to forimg
.
callback
is a function that will be called when the button is hit.
refresh
is a function that will be called when the button state might have been changed.
After you define the new button in the customButtons
Object, you have to include it's name in the buttons
option at the position where you want it to be placed.
An example with all these types of buttons:
HTML
<div id="eg-custom-buttons" class="text-small"> <p>You can see the new buttons added after the separator in the toolbar.</p> </div>
JAVASCRIPT
<script> $(function() { $('div#eg-custom-buttons').editable({ inlineMode: false, // Set custom buttons with separator between them. Also include the name // of the buttons defined in customButtons. buttons: ['undo', 'redo' , 'bold', 'sep', 'alert', 'clear', 'insertHTML'], // Define custom buttons. customButtons: { // Alert button with Font Awesome icon. alert: { title: 'Alert', icon: { type: 'font', // Font Awesome icon class fa fa-*. value: 'fa fa-info' }, callback: function () { alert ('Hello!') }, refresh: function () { } }, // Clear HTML button with text icon. clear: { title: 'Clear HTML', icon: { type: 'txt', value: 'x' }, callback: function () { this.setHTML(''); this.focus(); }, refresh: function () { } }, // Insert HTML button with image button. insertHTML: { title: 'Insert HTML', icon: { // Recommended size: 40 x 35. type: 'img', // src for the image. value: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+' }, callback: function () { // Insert HTML. this.insertHTML('My new HTML'); // Save HTML in undo stack. this.saveUndoStep(); }, refresh: function () { } } } }) }); </script>