Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Save Concepts

Save Button

To save the content of the editor you can defined an external button and call the save.save method that makes a HTTP requests from JS to saveURL. Your server has to handle the request an it is up to you to handle the requests on server side and store the data.

An alternative to defining a button that calls the save method is to include the save button in the toolbarButtons option. The button would automatically call the save method when it is hit, but you still have to define the save options like below.

Save options

You can use the following options and events to customize the save action:

saveParamtells 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 and save button

<div id="myEditor"></div>
<button id="saveButton">Save</button>

<script>
  var editor = new FroalaEditor('#myEditor', {
    // 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'},

    events: {
      'save.before': function () {
        // Before save request is made.
      },

      'save.after': function () {
        // After successfully save request.
      },

      'save.error': function () {
        // Do something here.
      }
    }
  })

  document.querySelector('#saveButton').addEventListener("click", function () {
    editor.save.save();
  })
</script>

Receive request on the server

When the save button is hit, the editor will make a HTTP request to your server. 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'].

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_452099279" 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_1582482382" 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_597345663" 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>