Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Save Concepts

Autosave

To enhance the saving experience, we have designed the save plugin which 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 5 options and 3 events that can be customized for the autosave action:
• saveInterval option tells the editor to automatically make save requests after a specified time.
• 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.
• saveMethod specifies the HTTP request type for the save action.
• saveParams option can be used to pass additional parameters in the request.
• froalaEditor.save.before event is triggered before the save request and it can be used to set additional save params or cancel the save action.
• froalaEditor.save.after event is triggered after a successfully save request.
• froalaEditor.save.error event is triggered if any error occurs during the upload process.

Initialize the WYSIWYG HTML editor

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

<script>
  $(function() {
    $('#myEditor')
      .froalaEditor({
        // Change save interval (time in miliseconds).
        saveInterval: 2500,

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

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

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

        // Additional save params.
        saveParams: {id: 'my_editor'}
      })
      .on('froalaEditor.save.before', function (e, editor) {
        // Before save request is made.
      })
      .on('froalaEditor.save.after', function (e, editor, response) {
        // After successfully save request.
      })
      .on('froalaEditor.save.error', function (e, editor, error) {
        // Do something here.
      })
  });
</script>

Receive request on the server

If the saveInterval option is set to a value grater than 0, HTTP requests are made automatically after each specified interval. 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_517697740" 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_1581334851" 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_1319350162" 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>