Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

API

Save / Restore Selection

selection

Try it yourself:

  1. You can use the buttons to play around with the selection:
    • The first button saves the selection.
    • The second button restores the selection.
    • The last button clears the selection.
  2. The selection will be restored correctly only if you don't make any changes by typing into the WYSIWYG HTML editor after you save it.

Edit in JSFiddle

HTML

<div id="froala-editor">
  <ol>
    <li>You can use the buttons to play around with the selection:
      <ul>
        <li>The first button saves the selection.</li>
        <li>The second button restores the selection.</li>
        <li>The last button clears the selection.</li>
      </ul>
    </li>
    <li>The selection will be restored correctly only if you don't make any changes by typing into the WYSIWYG HTML editor after you save it.</li>
  </ol>
</div>

JAVASCRIPT

<script>
  $(function() {
    $.FroalaEditor.DefineIcon('saveSelection', {NAME: 'download'});
    $.FroalaEditor.RegisterCommand('saveSelection', {
      title: 'Info',
      focus: true,
      undo: false,
      refreshAfterCallback: false,
      callback: function () {
        this.selection.save();
        alert('selection saved');
      }
    });

    $.FroalaEditor.DefineIcon('restoreSelection', {NAME: 'upload'});
    $.FroalaEditor.RegisterCommand('restoreSelection', {
      title: 'Info',
      focus: true,
      undo: false,
      refreshAfterCallback: false,
      callback: function () {
        this.selection.restore();
      }
    });

    $.FroalaEditor.DefineIcon('clearSelection', {NAME: 'trash'});
    $.FroalaEditor.RegisterCommand('clearSelection', {
      title: 'Info',
      focus: true,
      undo: false,
      refreshAfterCallback: false,
      callback: function () {
        this.selection.clear();
      }
    });

    $('div#froala-editor').froalaEditor({
      toolbarButtons: [
        'saveSelection', 'restoreSelection', 'clearSelection'
      ]
    })
  });
</script>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1051401844" 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_940386916" 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_1118305004" 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>