Package Exports

ember-jsoneditor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ember-jsoneditor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ember-jsoneditor

Ember component for JSON Editor to view, edit and format JSON.

Live demo: http://glavin001.github.io/ember-jsoneditor/

Compatibility

Ember.js v3.4 or above
Ember CLI v2.13 or above
Node.js v10 or above

Previous versions compatibility

ember-json-editor v9.3 - Ember.js 2.4 and above

Installation

ember install ember-jsoneditor

Usage

<JsonEditor @json={{this.model}} @mode={{this.mode}} @name={{this.name}} />

For Ember versions < 3.4, you need to use classic component invocation:

{{json-editor json=model mode=mode name=name}}

For a complete example, see the dummy test app in tests/dummy/app/.

Documentation

See jsoneditor for configuration details. ember-jsoneditor supports the following jsoneditor options:

Option	Description	Default
change	maps to jsoneditor's onChange event	null
error	maps to jsoneditor's onError event	null
expand	if true, renders with json tree expanded	false
history	Enables history undo/redo button	true
indentation	number of indentation spaces	2
mode	Editor mode - modes	tree
modes	Drop down to select editor mode. Options: 'tree', 'view', 'form', 'code', 'text'	All options
name	Field name for the JSON root node,	null
search	boolean - show editor search box	true

Example using event options

{{!-- app/templates/application.hbs --}}

<JsonEditor 
  @json={{this.model}} 
  @mode={{this.mode}} 
  @name={{this.name}} 
  @change={{action 'itChanged'}} 
  @error={{action 'myError'}} 
/>

// app/controllers/application.js
import Controller from '@ember/controller';

export default Controller.extend({
   /// ....
   actions: {
    myError(error){
      alert(`Error: ${error}`)
    },

    itChanged() {
      alert("The Data Changed!");
    }
  }
})

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.