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', SVG_KEY: 'star'});
    FroalaEditor.RegisterCommand('saveSelection', {
      title: 'Save selection',
      focus: true,
      undo: false,
      refreshAfterCallback: false,
      callback: function () {
        this.selection.save();
        alert('selection saved');
      }
    });

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

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

    new FroalaEditor('div#froala-editor', {
      toolbarButtons: [
        'saveSelection', 'restoreSelection', 'clearSelection'
      ]
    })
  });
</script>