API

Save / Restore Selection

Try it yourself:

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>