mosaico-save

var plugins;
plugins = [
    // plugin for integrating save button
    function(viewModel) {
        var saveCmd = {
            name: 'Save', // l10n happens in the template
            enabled: ko.observable(true)
        };

        saveCmd.execute = function() {
            saveCmd.enabled(false);
            viewModel.metadata.changed = Date.now();
            if (typeof viewModel.metadata.key == 'undefined') {
                viewModel.metadata.key = 'generate your unique key here';
            }

            // This is the simplest for sending it as POST
            // append postData with csrfToken
            var postData = {
                csrf_token: 'yourCsrfValueHere', // this is only required if your back-end requires csrf token
                metadata: viewModel.exportMetadata()
                content: viewModel.exportJSON(),
                html: viewModel.exportHTML()
            };

            $.post( 'your url here', postData)
                .done(function() {
                    viewModel.notifier.success(viewModel.t('Successfully saved.'));
                })
                .fail(function(jqXHR, textStatus, error) {
                    console.log(textStatus);
                    console.log(error);
                    console.log(jqXHR);
                    viewModel.notifier.error(viewModel.t('Saving failed. Please try again in a few moment or contact us.'));
                })
                .always(function() {
                    saveCmd.enabled(true);
                }
            );

            // and this is the alternative by sending it as POST but the html content as blob.
            // you can ignore and remove this part.

            var formData = new FormData();
            formData.append('csrf_token', 'you csrf value here'); // this only applies if your need csrf token
            formData.append('metadata', viewModel.exportMetadata());
            formData.append('json', viewModel.exportJSON());

            // I intended to send the html as blob
            // JavaScript file-like object
            var html = new Blob([viewModel.exportHTML()], { type: 'text/html'});
            formData.append('html', html);

            // You can use the simple $.post() instead of this.
            $.ajax({
                url: 'you url here',
                type: 'POST',
                data: formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,   // tell jQuery not to set contentType
                beforeSend: function() {
                    viewModel.notifier.info(viewModel.t('Saving please wait...'));
                },
                success: function(){
                    viewModel.notifier.success(viewModel.t('Successfully saved.'));
                },
                error: function(jqXHR, textStatus, error) {
                    console.log(textStatus);
                    console.log(error);
                    console.log(jqXHR);
                    viewModel.notifier.error(viewModel.t('Saving failed. Please try again in a few moment or contact us.'));
                },
                complete: function() {
                    saveCmd.enabled(true);
                }
            });
        };

        viewModel.save = saveCmd;
    },
];

var ok = Mosaico.init(yourOptionsHere, plugins);

if (!ok) {
    alert('Something went wrong initializing the editor. Please try again or contact us!');
}