Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Help Plugin

Adds a button under the More Misc menu to show the shortcuts commands in the help modal.


Plugin options:

helpSets
Array -
An object of items to show in the help modal.
Default: [
{
title: 'Inline Editor', commands: [
{ val: 'OSkeyE', desc: 'Show the editor' } ] },
{
title: 'Common actions', commands: [
{ val: 'OSkeyC', desc: 'Copy' },
{ val: 'OSkeyX', desc: 'Cut' },
{ val: 'OSkeyV', desc: 'Paste' },
{ val: 'OSkeyZ', desc: 'Undo' },
{ val: 'OSkeyShift+Z', desc: 'Redo' },
{ val: 'OSkeyK', desc: 'Insert Link' },
{ val: 'OSkeyP', desc: 'Insert Image' }
] },
{ title: 'Basic Formatting', commands: [
{ val: 'OSkeyA', desc: 'Select All' },
{ val: 'OSkeyB', desc: 'Bold' },
{ val: 'OSkeyI', desc: 'Italic' },
{ val: 'OSkeyU', desc: 'Underline' },
{ val: 'OSkeyS', desc: 'Strikethrough' },
{ val: 'OSkey]', desc: 'Increase Indent' },
{ val: 'OSkey[', desc: 'Decrease Indent' } ] },
{ title: 'Quote', commands: [ { val: 'OSkey\'', desc: 'Increase quote level' },
{ val: 'OSkeyShift+\'', desc: 'Decrease quote level' }
] },
{ title: 'Image / Video', commands: [ { val: 'OSkey+', desc: 'Resize larger' }, { val: 'OSkey-', desc: 'Resize smaller' } ] },
{ title: 'Table', commands: [
{ val: 'Alt+Space', desc: 'Select table cell' },
{ val: 'Shift+Left/Right arrow', desc: 'Extend selection one cell' },
{ val: 'Shift+Up/Down arrow', desc: 'Extend selection one row' }
] },
{ title: 'Navigation', commands: [
{ val: 'OSkey/', desc: 'Shortcuts' },
{ val: 'Alt+F10', desc: 'Focus popup / toolbar' },
{ val: 'Esc', desc: 'Return focus to previous position' }
]
}
]

Add Plugin to your code:

Plugin name: help

Plugin JS Script: ../js/plugins/help.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/help.min.js

Plugin CSS link: ../css/plugins/help.min.css


Plugin CSS link https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/help.min.css


Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_825267330" 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_1675465570" 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_1085929185" 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>