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.
- Documentation
- Concepts
- Custom Elements
- Save
- File
- Image
- Video
- Embedly Plugin
- Migration Guides
- From TinyMCE
- From V1
Custom Elements
Custom Button
Custom Plugin
Custom Dropdown
Custom Icon
Custom Popup
Custom Quick Insert Button
Custom Shortcut
Custom Plugin
Below is the basic JS structure for creating your own plugin for Froala WYSIWYG HTML text editor.
(function ($) { // Add an option for your plugin. $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, { myOption: false }); // Define the plugin. // The editor parameter is the current instance. $.FroalaEditor.PLUGINS.myPlugin = function (editor) { // Private variable visible only inside the plugin scope. var private_var = 'My awesome plugin'; // Private method that is visible only inside plugin scope. function _privateMethod () { console.log (private_var); } // Public method that is visible in the instance scope. function publicMethod () { console.log (_privateMethod()); } // The start point for your plugin. function _init () { // You can access any option from documentation or your custom options. console.log (editor.opts.myOption) // Call any method from documentation. // editor.methodName(params); // You can listen to any event from documentation. // editor.events.add('contentChanged', function (params) {}); } // Expose public methods. If _init is not public then the plugin won't be initialized. // Public method can be accessed through the editor API: // $('.selector').froalaEditor('myPlugin.publicMethod'); return { _init: _init, publicMethod: publicMethod } } })(jQuery);