API

Save / Restore Selection

  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>