Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Custom Elements

Custom Button

The following section shows how to create a custom button for the editor:

  1. First, define an icon for the button.
    FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
    
  2. Define a button.
    FroalaEditor.RegisterCommand('myButton', {
    
  3. Set the button title.
      title: 'My Button',
    
  4. Specify the icon for the button. If this option is not specified, the button name is used.
      icon: 'buttonIcon',
    
  5. Save the button action into undo stack.
      undo: true,
      
  6. Focus inside the editor before the callback.
      focus: true,
    
  7. Set showOnMobile to 'true' to show the button on mobile.
      showOnMobile: true,
    
  8. Add the following to refresh the buttons state after the callback.
      refreshAfterCallback: true,
      
  9. Call a function when the button is hit.
    The current context is the editor instance.
      callback: function () {
         console.log (this.html.get());
      },
    
  10. Call a function when the button state might have changed.
    The current context is the editor instance.
      refresh: function ($btn) {
        console.log (this.selection.element());
      }
    })
    

Your final code should look like this:

FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
FroalaEditor.RegisterCommand('myButton', {
  title: 'My Button',
  icon: 'buttonIcon',
  undo: true,
  focus: true,
  showOnMobile: true,
  refreshAfterCallback: true,
  callback: function () {
    console.log (this.html.get());
  },
  refresh: function ($btn) {
    console.log (this.selection.element());
  }
})

For a working example please refer to the Custom Buttons Example or the Custom Image Button Example

Note: Once a command is defined it can be included in any option that is using buttons: imageAltButtons, imageEditButtons, imageInsertButtons, imageSizeButtons, linkEditButtons, linkInsertButtons, tableColorsButtons, tableEditButtons, tableInsertButtons, toolbarButtons, toolbarButtonsMD, toolbarButtonsSM, toolbarButtonsXS, videoEditButtons, videoInsertButtons or videoSizeButtons.

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_470871451" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1234432213" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_276820571" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>