Inline Save Plugin for CKeditor
This repository houses 2 plugins for CKEditor: inlinesave and inlinecancel.
http://ckeditor.com/addon/inlinesave
This plugin allows the user to save the content for a CKEditor inline editor via http POST.
The options are:
postUrl
(string; required): the url to send the data to, via http POSTpostData
(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 serveronSuccess
(function; optional): function to call when data is sent successfully; editor element and http response data are passed into this functiononFailure
(function; optional): function to call when data cannot be sent; the editor element, http status code, and XMLHttpRequest object are passed into this functionsuccessMessage
(string; optional): CKEditor notification message on successerrorMessage
(string; optional): CKEditor notification message on erroruseJSON
(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 graySample 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
};
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:
Example data:
'<h1>Hello world!</h1>\n\n<p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>\n'
'cke_editor'
'true'
Note that 'test' was an additional field specified in config.inlinesave.postData
(as demonstrated in the example configuration above).
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;
}
If you set the useColorIcon
configuration option to true
(see above), the icon will be green instead of grey.
If you would like to see more detailed examples and some neat uses for the plugin, check out callbacks.md.
http://ckeditor.com/addon/inlinecancel
This is a simple cancel button for the CKEditor toolbar, designed to go along with the inlinesave addon (above). A custom onCancel
function can be specified, allowing the developer to implement his/her own functionality for the button.
The options are:
onCancel
(function; required): function to call when the button is clicked; editor element is passed into this function (can be used to manually undo changes; see notes)useColorIcon
(boolean; optional): when true
, icon will be red instead of graySample configuration object (place this in your configuration file):
config.inlinecancel = {
onCancel: function(editor) { console.log('cancel', editor); },
useColorIcon: false
};
If you want the label "Cancel" to display next to the icon, add the following css to your site:
.cke_button_label.cke_button__inlinecancel_label {
display: inline;
}
If you set the useColorIcon
configuration option to true
(see above), the icon will be red instead of grey.
Thanks to @SteveTheTechie for contributing some snazziness to both of the addons