Skip to content

Examples

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.

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>