Skip to content

Quick Insert Plugin

Helper to add images, tables and other stuff easier and faster, It appears when you have the cursor on a blank new line.


Plugin options:

quickInsertButtons
Array -
The buttons to display in quick insert.
Default:
['image', 'video', 'embedly', 'table', 'ul', 'ol', 'hr']
quickInsertEnabled
Boolean -
To enable quick insert functionality.
Default: true
quickInsertTags
Array -
The list of tags for which the quick insert button will appear when empty.
Default:
['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote']

Plugin events:

quickInsert.commands.after (cmd)
.
This event is a generic event that is triggered after every command inside the Quick Insert tool is executed.
● cmd
The command name.
quickInsert.commands.before (cmd))
.
This event is a generic event that is triggered before every command inside the Quick Insert tool is executed.
Note: Returning false in the handler assigned to the event will cancel the current action.
● cmd
The command name.

Add Plugin to your code:

Plugin name: quickInsert

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

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

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


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


Example :

● Quick Insert Menu
● Custom Quick Insert Button
File: 15747