v2.x Configuration

Configuration

• General Options
• General Methods
• Images Options
• Embeds Options
• Usage
• Adding A New Style

General Options

Option	Type	Default	Description
editor	MediumEditor	null	REQUIRED Instance of MediumEditor
enabled	boolean	true	If the plugin is enabled
addons	object	see below	Configuration of addons

General Methods

Method	Description
enable	Enables the plugin. It's connected to MediumEditor's own activate function, so if the editor is activated, so is the plugin. (The plugin is enabled automatically. Use it only if you've previously disabled the plugin.)
disable	Disables the plugin. It's connected to MediumEditor's own deactivate function, so if the editor is deactivated, so is the plugin.

General Methods Usage Example

$('.editable').mediumInsert('disable');

Images Options

Option	Type	Default	Description
label	string	<span class="fa fa-camera"></span>	A label for the addon
uploadScript	string	null	DEPRECATED Use fileUploadOptions instead
deleteScript	string	delete.php	A relative path to a delete script
deleteMethod	string	POST	The HTTP Method you want to use with deleteScript
preview	boolean	true	Show an image before it is uploaded (only in browsers that support this feature)
captions	boolean	true	Enable captions
captionPlaceholder	string	Type caption for image (optional)	Caption placeholder
autoGrid	integer	3	Min number of images that automatically form a grid
formData	object	null	DEPRECATED Use fileUploadOptions instead
fileUploadOptions	object	{   url: 'upload.php',   acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i }	File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
fileDeleteOptions	object	{}	These extra options will be added to the ajax request when deleting an image, for example a header: {    headers: {     'X-CSRF-TOKEN': 'MyAwesomeToken'   } } See http://api.jquery.com/jquery.ajax/
styles	object	{   wide: {     label: '<span class="fa fa-align-justify"></span>'   },   left: {     label: '<span class="fa fa-align-left"></span>'   },   right: {     label: '<span class="fa fa-align-right"></span>'   },   grid: {     label: '<span class="fa fa-th"></span>'   } }	Available image styles
styles.styleName.label	string		A label for a style
styles.styleName.added	function	function ($el) {}	Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
styles.styleName.removed	function	function ($el) {}	Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
actions	object	{   remove: {     label: '<span class="fa fa-times"></span>',     clicked: function ($el) {       var $event = $.Event('keydown');       $event.which = 8;       $(document).trigger($event);     }   } }	Actions for an optional second toolbar
actions.actionName.label	string		A label for an action
actions.actionName.clicked	function	function ($el) {}	Callback function called when an action is selected
messages	object	{   acceptFileTypesError: 'This file is not in a supported format: ',   maxFileSizeError: 'This file is too big: ' }	Error and info messages
uploadCompleted	function	function ($el, data) {}	Callback function called when upload is completed
uploadFailed	function	function (uploadErrors, data) {}	Callback function called when upload failed

Embeds Options

Option	Type	Default	Description
label	string	<span class="fa fa-youtube-play"></span>	A label for the addon
placeholder	string	Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter	Placeholder displayed when entering URL to embed
captions	boolean	true	Enable captions
captionPlaceholder	string	Type caption (optional)	Caption placeholder
oembedProxy	string/null	http://medium.iframe.ly/api/oembed?iframe=1	URL to oEmbed proxy endpoint, such as Iframely, Embedly or your own. You are welcome to use http://medium.iframe.ly/api/oembed?iframe=1 for your dev and testing needs, courtesy of Iframely. Null will make the plugin use pre-defined set of embed rules without making server calls.
parseOnPaste	boolean	false	Automatically parse and embed URL on paste
styles	object	{   wide: {     label: '<span class="fa fa-align-justify"></span>'   },   left: {     label: '<span class="fa fa-align-left"></span>'   },   right: {     label: '<span class="fa fa-align-right"></span>'   } }	Available addon styles
styles.styleName.label	string		A label for a style
styles.styleName.added	function	function ($el) {}	Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
styles.styleName.removed	function	function ($el) {}	Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
actions	object	{   remove: {     label: '<span class="fa fa-times"></span>',     clicked: function ($el) {       var $event = $.Event('keydown');       $event.which = 8;       $(document).trigger($event);     }   } }	Actions for an optional second toolbar
actions.actionName.label	string		A label for an action
actions.actionName.clicked	function	function ($el) {}	Callback function called when an action is selected

Usage

$('.editable').mediumInsert({
    editor: null, // (MediumEditor) Instance of MediumEditor
    enabled: true, // (boolean) If the plugin is enabled
    addons: { // (object) Addons configuration
        images: { // (object) Image addon configuration
            label: '<span class="fa fa-camera"></span>', // (string) A label for an image addon
            uploadScript: null, // DEPRECATED: Use fileUploadOptions instead
            deleteScript: 'delete.php', // (string) A relative path to a delete script
            deleteMethod: 'POST',
            fileDeleteOptions: {}, // (object) extra parameters send on the delete ajax request, see http://api.jquery.com/jquery.ajax/
            preview: true, // (boolean) Show an image before it is uploaded (only in browsers that support this feature)
            captions: true, // (boolean) Enable captions
            captionPlaceholder: 'Type caption for image (optional)', // (string) Caption placeholder
            autoGrid: 3, // (integer) Min number of images that automatically form a grid
            formData: {}, // DEPRECATED: Use fileUploadOptions instead
            fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
                url: 'upload.php', // (string) A relative path to an upload script
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types
            },
            styles: { // (object) Available image styles configuration
                wide: { // (object) Image style configuration. Key is used as a class name added to an image, when the style is selected (.medium-insert-images-wide)
                    label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
                    added: function ($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
                    removed: function ($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
                },
                left: {
                    label: '<span class="fa fa-align-left"></span>'
                },
                right: {
                    label: '<span class="fa fa-align-right"></span>'
                },
                grid: {
                    label: '<span class="fa fa-th"></span>'
                }
            },
            actions: { // (object) Actions for an optional second toolbar
                remove: { // (object) Remove action configuration
                    label: '<span class="fa fa-times"></span>', // (string) Label for an action
                    clicked: function ($el) { // (function) Callback function called when an action is selected
                        var $event = $.Event('keydown');
                        
                        $event.which = 8;
                        $(document).trigger($event);   
                    }
                }
            },
            messages: {
                acceptFileTypesError: 'This file is not in a supported format: ',
                maxFileSizeError: 'This file is too big: '
            },
            uploadCompleted: function ($el, data) {}, // (function) Callback function called when upload is completed
            uploadFailed: function (uploadErrors, data) {} // (function) Callback function called when upload failed
        },
        embeds: { // (object) Embeds addon configuration
            label: '<span class="fa fa-youtube-play"></span>', // (string) A label for an embeds addon
            placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter', // (string) Placeholder displayed when entering URL to embed
            captions: true, // (boolean) Enable captions
            captionPlaceholder: 'Type caption (optional)', // (string) Caption placeholder
            oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1', // (string/null) URL to oEmbed proxy endpoint, such as Iframely, Embedly or your own. You are welcome to use "http://medium.iframe.ly/api/oembed?iframe=1" for your dev and testing needs, courtesy of Iframely. *Null* will make the plugin use pre-defined set of embed rules without making server calls.
            styles: { // (object) Available embeds styles configuration
                wide: { // (object) Embed style configuration. Key is used as a class name added to an embed, when the style is selected (.medium-insert-embeds-wide)
                    label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
                    added: function ($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
                    removed: function ($el) {} // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
                },
                left: {
                    label: '<span class="fa fa-align-left"></span>'
                },
                right: {
                    label: '<span class="fa fa-align-right"></span>'
                }
            },
            actions: { // (object) Actions for an optional second toolbar
                remove: { // (object) Remove action configuration
                    label: '<span class="fa fa-times"></span>', // (string) Label for an action
                    clicked: function ($el) { // (function) Callback function called when an action is selected
                        var $event = $.Event('keydown');
                        
                        $event.which = 8;
                        $(document).trigger($event);   
                    }
                }
            }
        }
    }
});

Adding A New Style

Adding a new image style is as easy as this:

$('.editable').mediumInsert({
    // ...
    addons: {
        images: {
            // ...
            styles: {
                // ...
                slideshow: {
                    label: '<span class="fa fa-play"></span>',
                    added: function ($el) {
                        // Initialize slideshow
                        $el.cycle({
                           slides: 'figure'
                        });
                    },
                    removed: function ($el) {
                        // Destroy slideshow
                        $el.cycle('destroy');
                    }
                }
            }
        }
    }
});