ember-jsoneditor

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
------------------------------------------------------------------------------

`handlebars

`

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

`handlebars
{{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

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

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

`javascript
// 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.