Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Concepts

Autosave

Our rich text editor has built-in mechanisms that automatically make HTTP requests from JS to your server which has to handle the requests and save the data. It is up to you to handle these requests on server side and store the data.

Save options

There are up to 7 parameters that can be customized for the autosave action: saveParam, saveURL, saveParams, autosave, autosaveInterval, saveRequestType and editable.saveError.
autosave option tells the editor to automatically make save requests according to the autosaveInterval option.
saveParam tells the editor in which parameter of the request to put the edited content. By default it is set into the body param.
saveURL is the most important option, it is the URL where the save request is made.
saveRequestType specifies the HTTP request type for the save action.
saveParams option can be used to pass additional parameters in the request.
editable.saveError event is invoked if any error occurs during the upload process.

Initialize the WYSIWYG HTML editor

<div id="myEditor"></div>

<script>
  $(function() {
    $('#myEditor')
      .editable({
        // Enable autosave.
        autosave: true,

        // Change autosave interval (time in miliseconds).
        autosaveInterval: 2500,

        // Set the save param.
        saveParam: 'content',

        // Set the save URL.
        saveURL: 'http://example.com/save',

        // HTTP request type.
        saveRequestType: 'POST',

        // Additional save params.
        saveParams: {id: 'my_editor'}
      })
      .on('editable.saveError', function (e, editor, error) {
        // Do something here.
      })
  });
</script>

Receive request on the server

Because the autosave option is enabled HTTP request are made automatically according to the autosaveInterval value. The content will be sent in the content parameter of the request and the server has to process the request and save the data in the DB. If any additional saveParams are passed they will also be included in the request.

PHP example: For the code above you would get the rich text editor's content in $_POST['content'] variable and the additional information in $_POST['id'].

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1818542145" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_189341205" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1485783220" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>