x-editable json input editing

json.js

/**
JSON editable input.
Internally value stored as {city: "Moscow", street: "Lenina", building: "15"}

Supported editors:
- https://github.com/json-editor/json-editor
- https://github.com/josdejong/jsoneditor

@class json
@extends abstractinput
@final
@example
<a href="#" id="json" data-type="json" data-pk="1">json</a>
<style>
  .editable-json {
    width: 500px;
  }
  // if using bootstrap and json-editor (but not jsoneditor)
  .editableform div[data-schemaid] .form-control {
    width: 100%;
  }
</style>
<script>
  if (typeof JSONEditor.defaults != 'undefined') {
    JSONEditor.defaults.options = {
      theme: 'bootstrap3',
      disable_collapse: true,
      disable_edit_json: true,
      remove_empty_properties: true,
      disable_properties: true
      // iconlib: "fontawesome4"
    };
  }
  $(function() {
    $('#json').editable({
      url: '/post',
      title: 'Edit address',
      value: {
        city: "Moscow",
        street: "Lenina",
        building: "15"
      },
      json: {
        schema: {
          "type": "object",
          "title": "Address",
          "properties": {
            "city": {
              "title": "City",
              "type": "string"
            },
            "street": {
              "title": "Street name",
              "type": "string"
            },
            "building": {
              "title": "Building number",
              "type": "string"
            }
          }
        }
      }
    });
  });
</script>
**/
(function($) {
  "use strict";

  var Json = function(options) {
    this.init('json', options, Json.defaults);
  };

  $.fn.editableutils.inherit(Json, $.fn.editabletypes.abstractinput);

  $.extend(Json.prototype, {
    /**
    Renders input from tpl

    @method render()
    **/
    render: function() {
      this.setClass();
      /* if using bootstrap, make form non-inline */
      this.$input.closest('form.form-inline').removeClass('form-inline').addClass('form');
      var element = this.$input[0];
      this.$editor = new JSONEditor(element, this.options.json);
    },

    /**
    Default method to show value in element. Can be overwritten by display option.

    @method value2html(value, element)
    **/
    value2html: function(value, element) {
      if (!value) {
        $(element).empty();
        return;
      }
      var html = $('<span class="text-muted">').text('json');
      $(element).html(html);
    },

    /**
    Converts value to string.
    It is used in internal comparing (not for sending to server).

    @method value2str(value)
    **/
    value2str: function(value) {
      return JSON.stringify(value);
    },

    /**
    Sets value of input.

    @method value2input(value)
    @param {mixed} value
    **/
    value2input: function(value) {
      if (!value) {
        return;
      }
      if (typeof this.$editor.setValue === "function") {
        this.$editor.setValue(value)
      } else {
        this.$editor.set(value)
      }
    },

    /**
    Returns value of input.

    @method input2value()
    **/
    input2value: function() {
      return typeof this.$editor.getValue === "function" ? this.$editor.getValue() : this.$editor.get();
    },

    /**
    Activates input: sets focus on the first field.

    @method activate()
    **/
    activate: function() {
      this.$input.find('.form-group input.form-control:first').focus();
    },

    /**
    Attaches handler to submit form in case of 'showbuttons=false' mode

    @method autosubmit()
    **/
    autosubmit: function() {
      this.$input.keydown(function(e) {
        if (e.which === 13) {
          $(this).closest('form').submit();
        }
      });
    }
  });

  Json.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
    /**
    @property tpl
    @default <div></div>
    **/
    tpl: '<div></div>',
    /** JSONEditor options
    @property json
    @type object
    @default null
    **/
    json: null,
    /**
    @property inputclass
    @default editable-json
    **/
    inputclass: 'editable-json'
  });

  $.fn.editabletypes.json = Json;

}(window.jQuery));

Extra input type for x-editable. json-editor example and jsoneditor example.