Sorry, you need to enable JavaScript to visit this website.

Inline Save

 

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

Usage 1. 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,715 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.9 4.8 4.7

Version: 2.8.3

DownloadRelease notes

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

Version: 2.8.2

DownloadRelease notes

Adds successMessage and errorMessage config options for displaying CKEditor notifications.

Version: 2.8.1

DownloadRelease notes

Set config to empty object if it is not defined by user

Version: 1.30

DownloadRelease notes

Now you can get the ID of the data being saved. In your php file used to handle the data from the editor, you can get the ID with this variable: $_POST['editorID']

Version: 1.21

DownloadRelease notes

Now you can specify the file to process the editor data on the actual web page.

Put this code in the html of your webpage (in the head is best but anywhere should work):

<script>var dump_file="yourfile.php";</script>

And replace "yourfile.php" with the appropriate file.

 

Also fixed a couple of misleading comments in the code.

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