editable.php

<?php
  $original = htmlspecialchars( preg_replace( '/\[\[(.*?)\]\]/i', '$1', $tag ), ENT_QUOTES );
  $resourseId = $modx->resource->get('id');;
  return '<span data-editable data-name="ce-' . $name . '" data-original="' . $original . '" data-resource="' . $resourseId . '">' . $input . '</span>';

editor.js

window.addEventListener('load', function() {
  var editor;

  ContentTools.StylePalette.add([
    new ContentTools.Style('Author', 'author', ['p'])
  ]);
  editor = ContentTools.EditorApp.get();
  editor.init('*[data-editable]', 'data-name');
  editor.bind('save', function (regions) {
    var name, payload, xhr;

    // Set the editor as busy while we save our changes
    this.busy(true);

    // Collect the contents of each region into a FormData instance
    payload = new FormData();
    payload['__page__'] = window.location.pathname;
    console.log('typeof payload: ' + typeof payload);
    console.log('regions:');
    console.log(regions);
    for (name in regions) {
      payload[name] = regions[content];
    }

    // Send the update content to the server to be saved
    function onStateChange(ev) {
      // Check if the request is finished
      if (ev.target.readyState == 4) {
        editor.busy(false);
        if (ev.target.status == '200') {
          // Save was successful, notify the user with a flash
          new ContentTools.FlashUI('ok');
        } else {
          // Save failed, notify the user with a flash
          new ContentTools.FlashUI('no');
        }
      }
    };

    // xhr = new XMLHttpRequest();
    // xhr.addEventListener('readystatechange', onStateChange);
    // xhr.open('POST', '/save-my-page');
    console.log('payload:');
    console.log(payload);
    // xhr.send(payload);
  });
});