Asynchronous Content Editing Plugin - Fasteditor

Fasteditor is a lightweight jQuery plugin that allows you to edit any content on your webpage.

The plugin takes advantage of Promises API to handle operations asynchronously.

How to use it:

1. Load the Fasteditor plugin's script fasteditor.min.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/fasteditor.min.js"></script>

2. Add a unique ID to the element which should be editable.

<div class="item" data-id="123">
  <h2 class="edit-it">Edit Me</h2>
  <p class="edit-it">Edit Me</p>
</div>

3. Initialize the plugin on the element and add custom controls as follows.

let plugin = $el.fastEditor({
    editMode: true,
    controlsPosition: 'bottom',
    editElementSelector: '.edit-it',
    controls: [{
      tag: 'button',
      label: 'Remove',
      action: 'remove',
      class: 'remove-item-btn'
    },
    {
      tag: 'button',
      label: 'Add new item',
      action: 'add',
      class: 'add-new-item-btn'
    }]
});

let { workers, emitter } = plugin;

// add
workers.add = function(data) {
  return new Promise((res, rej) => {
    setTimeout(function() {
      let $el = $(data.parentNode);
      let item = $(`<article class="item">
      <h2 class="edit-it">Title ${counter++}</h2>
      <p class="edit-it">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sint quaerat sunt asperiores perferendis odio facere sed explicabo recusandae illo.</p>
      </article>`);
      initForItems(item);
      $el.append(item);
      res();
    }, 1000);
  });
}

// remove
workers.remove = function(data) {
  console.log('Remove action received', data);
    return new Promise((res, rej) => {
      // Pseudo request
      setTimeout(function() {
        let $el = $(data.parentNode);
        $el.fadeOut(300, () => {
          $el.remove();
        });
        res();
      }, 1000);
    });
}

// edit
workers.edit = function(data) {
  console.log('Edit action received', data);
    return new Promise((res, rej) => {
      // Pseudo request
      setTimeout(function() {
        res();
      }, 1000);
    });
}

// emitter
emitter.all = function(event, data) {
  console.log(`Child ${event} event`, data);
}

4. All default configuration options.

let plugin = $el.fastEditor({
    attr: 'data-id',
    controlsPosition: 'top', // or 'bottom'
    editMode: true,
    editElementSelector: '.edit-it',
    successTimeout: 500,
    controls: [],
    elementPreHandler: function(el, data, parentNode) {
      return el;
    }
});

---

This awesome jQuery plugin is developed by unbywyd. For more Advanced Usages, please check the demo page or visit the official website.