Inline Save

 

This plugin allows the user to save the content for a CKEditor inline editor via http POST.

Usage1. Add the plugin to your editor. Help 2. Set configuration options

The options are:

  • postUrl (string; required): the url to send the data to, via http POST
  • postData (object; optional): a JavaScript object containing additional data to send with the save; e.g.,{test: true}
  • onSave (function; optional): function to call when the save button is pressed; editor element is passed into this function; if false is returned, data will not be sent to server
  • onSuccess (function; optional): function to call when data is sent successfully; editor element and http response data are passed into this function
  • onFailure (function; optional): function to call when data cannot be sent; the editor element, http status code, and XMLHttpRequest object are passed into this function
  • successMessage (string; optional): CKEditor notification message on success
    errorMessage (string; optional): CKEditor notification message on error
  • useJSON (boolean; optional): when true, the plugin will send data to the server with Content-type 'application/json'; defaults to false and uses Content-type 'application/x-www-form-urlencoded' (see step #3)
  • useColorIcon (boolean; optional): when true, icon will be green instead of gray

Sample configuration object (place this in your configuration file or use when initializing a new inline editor instance):

config.inlinesave = {
  postUrl: '/myurl',
  postData: {test: true},
  onSave: function(editor) { console.log('clicked save', editor); return true; },
  onSuccess: function(editor, data) { console.log('save successful', editor, data); },
  onFailure: function(editor, status, request) { console.log('save failed', editor, status, request); },
  successMessage: 'Yay we saved it!',
  errorMessage: 'Something went wrong :(',
  useJSON: false,
  useColorIcon: false
};
3. Receive the data on your server.

By default, the data is sent with Content-type 'application/x-www-form-urlencoded' (this is the default type for HTML forms). However, if config.inlinesave.useJSON is set to true, then the Content-type will be 'application/json' and the data will be sent as a JSON object.

In either case, there are 2 fields you will always receive, in addition to those specified in the postData option:

  • editabledata (string): the data being saved from the editor
  • editorID (string): the identifier for the editor (useful for distinguishing between different editors)

Example data:

  • editabledata: '<h1>Hello world!</h1>\n\n<p>I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>\n'
  • editorID: 'cke_editor'
  • test: 'true'

Note that 'test' was an additional field specified in config.inlinesave.postData (as demonstrated in the example configuration above).

Display label

If you want the label "Save" to display next to the icon, add the following css to your site:

.cke_button_label.cke_button__inlinesave_label {
    display: inline;
}
Use Color Icon

If you set the useColorIcon configuration option to true (see above), the icon will be green instead of grey.

More examples

If you would like to see more detailed examples and some neat uses for the plugin, check out callbacks.md.

Screenshots

inlinesave

24,716 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 2.8.3

DownloadRelease notes

https://github.com/tyleryasaka/inlinesave/pull/24

Image Resized Upload

Big Add-ons Pack → Image Resized Upload+

Note: this plugin was merged with CKEditor Quick Image Upload+ add-on

You can easely upload images into CKEditor's document in two clicks. No server file manager will be shown: just select the file and it is inserted into the editor's area.

No CKFinder required. The plugin does not use CKFinder dialog for selecting and uses self uploader script.

Screenshots

Bootstrap Tools

Bootstrap framework is designed to comfortably make site templates. Now you can include Bootstrap elements directly into the inner CKEditor's area thanks to Bootstrap Tools. The package offers an impressive set of tools to get full control over markup.
 
Among available features are visual column width setup, tools to manipulate containers, rows and columns (add/delete/move), and layout highlighting.
 
With the possibility to fine-tune blocks, you can manually edit attributes, classes and styles of Bootstrap/Foundation blocks. Surely, the Foundation framework is supported too.

Screenshots

Button

Do you need a button on the website? Easy! Just use the Button add-on.

You can customize the button, which is the HTML tag 'a' in fact, as you wish. With the intuitive user interface of the dialog you can select a preferred style of the background, configure the borders, the rounding style of corners, adjust typography an so on. All settings are cross-browser.
The plugin doesn't attach additional CSS, all styles are built into the document (right into the `style` attribute).

See YouTube Demo Video: http://www.youtube.com/watch?v=q4n84WdlYKU

Screenshots

Widget

This plugin introduces the Widget API. It is required by all plugins that create widgets.

Widgets let you standardize, manage and control the layout and style of specific sections of your WYSIWYG area, all this at the press of a button. They group various elements together so you can easily move widgets around the surrounding content.

Widgets are fully customizable because they are based on our plugin system. 

widget

1,246,319 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 4.16.0

DownloadRelease notes

The first major release of CKEditor 4.16.0

Version: 4.15.1

DownloadRelease notes

The first minor release of CKEditor 4.15.1

Version: 4.14.1

DownloadRelease notes

The first minor release of CKEditor 4.14.1

Mathematical Formulas

Mathematical plugin that introduces the MathJax widget. You can use it to create or modify equations using TeX.

The following configuration options are available:

Please note that this plugin is not compatible with Internet Explorer 8.

Dependencies: Requires the following plugins to work: Widget, Line Utilities, Dialog, Clipboard.

See the Widget Installation guide for help.

Screenshots

mathjax

100,424 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 4.16.0

DownloadRelease notes

The first major release of CKEditor 4.16.0

Version: 4.15.1

DownloadRelease notes

The first minor release of CKEditor 4.15.1

Version: 4.14.1

DownloadRelease notes

The first minor release of CKEditor 4.14.1

Google Maps

Need a map? Google Maps will help you inserting and editing a Google map into your website.

The location of your office, travel itinerary or some mark on the map are now available in one click.
With simple tools you can customize the map as you wish.

Features:

  • edit any of the maps you have inserted before
  • configure the view size, and zoom of the map
  • configure Google Map type (Roadmap / Satellite / Hybrid / Relief)
  • semantic search for objects by addresses, names, etc.
  • support for map layers
  • overlay of points, routes, areas onto the map.

Screenshots

Translater

Translater - plugin for translate fragment text of one language into two

CKEditor plugin for quick translation of text, using the specialized services. If you use the service Yandex Translate API that translations are provided by a browser directly referring to the server Yandex. If you have purchased the full version of the plugin, you will be given another 2 service. Google Translate API and Bing Translate API, but for this web server must support the php.

30+ languages are supported.

Screenshots

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 1.0.4

DownloadRelease notes

Fixed a problem with Firefox

File Uploader by Uploadcare

File Uploader by Uploadcare is all about uploading user-generated content. It dramatically affects your product or business: if an upload doesn't hit its target, it won't convert, and you lose a customer.

File Uploader allows your users to rapidly upload files from many sources including their device, social media, and cloud storage.

  • All uploads are powered by a distributed upload network that picks a node depending on your user location and bandwidth. That's up to 4x faster than other offerings.
  • Once uploaded, your content gets delivered by a smart CDN running on the best-in-class backbone that accelerates your media by up to 9x.
  • File Uploader supports getting files from URLs, Facebook, Instagram, VK, Dropbox, Google Drive, OneDrive, Box, Evernote, and more.
  • Any file types are supported: images, docs, videos, etc. The uploader handles files of up to 5 TB in size.
  • When uploading images, those can be easily cropped in any browser right in the dialog. You can also save bandwidth by optimizing images on user devices.
  • The uploader supports 20+ locales out of the box: English, Spanish, French, Latvian, Polish, Portuguese, Russian, Chinese, and many more.

Sign up for Uploadcare to get your free API keys.

Screenshots

uploadcare

71,599 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 3.0.0

DownloadRelease notes

Updated

  • The default version of the widget is now 3.x.
  • Added integration to the default config to provide info
    on the CKEditor version and plugin version for User Agent with requests
    to Uploadcare Upload API.

Stored automatically in the browser storage

Automatically saves the data in the document is changed. The data are stored in the repository browser, so-that any failure or computer network can always restore the latest version of the document.

Plugin is FREE. And can be downloaded from doksoft.com website.

Screenshots

Releases

Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 1.4.0

DownloadRelease notes

Support CKEditor 4.2

Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check