Skip to content

v2.x Configuration

Harry Bailey edited this page Sep 17, 2018 · 10 revisions

Configuration

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');
                    }
                }
            }
        }
    }
});
You can’t perform that action at this time.