Save / Restore Selection in Froala Editor V3

by froala

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<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

FroalaEditor.DefineIcon('saveSelection', {NAME: 'download', SVG_KEY: 'star'});
FroalaEditor.RegisterCommand('saveSelection', {
  title: 'Info',
  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: '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();
  }
});

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