Save / Restore Selection

HTML

<div id="eg-selection" class="text-small">
          <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() {
    $('div#eg-selection').editable({
      inlineMode: false,

      buttons: [
        'saveSelection', 'restoreSelection', 'clearSelection'
      ],

      customButtons: {
        saveSelection: {
          title: 'Save Selection',
          icon: {
            type: 'font',
            value: 'fa fa-download'
          },
          callback: function () {
            this.saveSelectionByMarkers();
          }
        },

        restoreSelection: {
          title: 'Restore Selection',
          icon: {
            type: 'font',
            value: 'fa fa-upload'
          },
          callback: function () {
            this.restoreSelectionByMarkers();
          }
        },

        clearSelection: {
          title: 'Clear Selection',
          icon: {
            type: 'font',
            value: 'fa fa-trash'
          },
          callback: function () {
            this.clearSelection();
          }
        }
      }
    })
  });
</script>