This plugin adds a Gighy icon to the Insert toolbar.  Clicking it provides searching of the https://giphy.com library, previewing of the resulting animated GIFs and Stickers (transparent animated GIFs), and selecting from multiple sizes for insertion into the CK Editor.

Using the Plugin/Features

• Click the on the insert toolbar to open the Giphy Dialog
• Enter a phrase in the text field  to send to the Giphy GIF Search API or the Giphy Stickers Search API and hit Enter key or click the Search button.
• Up to 12 thumbnail previews of matching Giphy GIFs/Stickers ill display along with a get more link
  • Displays title (truncated if too wide) below thumbnail
  • Hover displays full title and size of the original image
• Single click thumbnail to select it
• Double click a thumbnail to insert default size image, defaults to _ small_ (unless overridden by config), in editor at cursor position or as first entry if no cursor position selected or Choose an insert size from the dropdown, small, medium, or large.
  • Default size of small is the original width and height divided by 4 or 25% of original
  • Default size of medium is the original width and height divided by 2 or 50% of original
  • Default size of large is the original width and height or 100% of the original

Setup

To use this plugin in your CKEDitor v4.x installation:

• If downloaded Extract the giphy folder, maintaining sub-folder structure, to the plugins folder of your CKEditor installation.
• If using the CDN, extract the plugin to any other folder accessible by the code you are integrating the CKEditor with.
• Follow the Configuration instructions below

Configuration

This plugin app is approved by Giphy but under my personal Giphy API key.  To use this plugin you will need to create an your own API key at https://developers.giphy.com/dashboard/?create=true.  Make sure to select API (not SDK).  If you expect a lot of public use you will likely need to submit your API key to Giphy for production approval, otherwise you can leave it restricted.  Start with restricted and once you have the plugin integrated to your app and rolled out you can submit to Giphy for production approval

• giphy_credentials
  • String value containing a valid Giphy API key.
  • This is the one setting that is required for the plugin to work!
  • Typically such things would not be documented in a JavaScript file as that isn't secure. If this concerns you then please don't use this plugin. While this author agrees, this was written none-the-less and the JS examples on the CK Editor website do the same. You've been warned.
• giphy_small_size_divisor
  • Numeric value indicating how much to divide the original image by when choose the insert small option.
  • Default if not specified is 4 or 25%.
• giphy_medium_size_divisor
  • Numeric value indicating how much to divide the original image by when choose the insert medium option.
  • Default if not specified is 2 or 50%.
• giphy_large_size_divisor
  • Numeric value indicating how much to divide the original image by when choose the insert medium option.
  • Default if not specified is 1 or 100%.
• giphy_double_click_default_size
  • String value that must be either small, medium, or large.
  • Sets the insert size to use for double click insertion.
  • Default is small.

Browser Support

• This plugin uses JavaScript constructs added to the language several years ago that are supported by multiple modern browser versions.
• The JavaScript used by this plugin was NOT compiled back to a version that would support older browsers.
• This plugin will not work with any version IE and likely not with very old versions of other browsers.