It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Popups
Custom Popup
Try it yourself:
Click on the "Show Popup" star icon to see the custom popup.
For more details please see Custom Popup Concept.
HTML
<div id="froala-editor"> <p>Click on the "Show Popup" star icon to see the custom popup.</p> </div>
CSS
<style> .custom-layer { text-align: center; padding: 10px; } </style>
JAVASCRIPT
<script> // Define popup template. $.extend($.FroalaEditor.POPUP_TEMPLATES, { "customPlugin.popup": '[_BUTTONS_][_CUSTOM_LAYER_]' }); // Define popup buttons. $.extend($.FroalaEditor.DEFAULTS, { popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'], }); // The custom popup is defined inside a plugin (new or existing). $.FroalaEditor.PLUGINS.customPlugin = function (editor) { // Create custom popup. function initPopup () { // Popup buttons. var popup_buttons = ''; // Create the list of buttons. if (editor.opts.popupButtons.length > 1) { popup_buttons += '<div class="fr-buttons">'; popup_buttons += editor.button.buildList(editor.opts.popupButtons); popup_buttons += '</div>'; } // Load popup template. var template = { buttons: popup_buttons, custom_layer: '<div class="custom-layer">Hello World!</div>' }; // Create popup. var $popup = editor.popups.create('customPlugin.popup', template); return $popup; } // Show the popup function showPopup () { // Get the popup object defined above. var $popup = editor.popups.get('customPlugin.popup'); // If popup doesn't exist then create it. // To improve performance it is best to create the popup when it is first needed // and not when the editor is initialized. if (!$popup) $popup = initPopup(); // Set the editor toolbar as the popup's container. editor.popups.setContainer('customPlugin.popup', editor.$tb); // This will trigger the refresh event assigned to the popup. // editor.popups.refresh('customPlugin.popup'); // This custom popup is opened by pressing a button from the editor's toolbar. // Get the button's object in order to place the popup relative to it. var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]'); // Set the popup's position. var left = $btn.offset().left + $btn.outerWidth() / 2; var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10); // Show the custom popup. // The button's outerHeight is required in case the popup needs to be displayed above it. editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight()); } // Hide the custom popup. function hidePopup () { editor.popups.hide('customPlugin.popup'); } // Methods visible outside the plugin. return { showPopup: showPopup, hidePopup: hidePopup } } // Define an icon and command for the button that opens the custom popup. $.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'}) $.FroalaEditor.RegisterCommand('myButton', { title: 'Show Popup', icon: 'buttonIcon', undo: false, focus: false, plugin: 'customPlugin', callback: function () { this.customPlugin.showPopup(); } }); // Define custom popup close button icon and command. $.FroalaEditor.DefineIcon('popupClose', { NAME: 'times' }); $.FroalaEditor.RegisterCommand('popupClose', { title: 'Close', undo: false, focus: false, callback: function () { this.customPlugin.hidePopup(); } }); // Define custom popup 1. $.FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o' }); $.FroalaEditor.RegisterCommand('popupButton1', { title: 'Button 1', undo: false, focus: false, callback: function () { alert("popupButton1 was pressed"); } }); // Define custom popup 2. $.FroalaEditor.DefineIcon('popupButton2', { NAME: 'bullhorn' }); $.FroalaEditor.RegisterCommand('popupButton2', { title: 'Button 2', undo: false, focus: false, callback: function () { alert("popupButton2"); } }); // Initialize the editor. $(function () { $('#froala-editor').froalaEditor({ toolbarButtons: ['bold', 'italic', '|', 'myButton'], pluginsEnabled: ['customPlugin'] }) }) </script>