Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Glavin001/ember-jsoneditor
Ember component to view, edit and format JSON.
https://github.com/Glavin001/ember-jsoneditor
Last synced: about 2 months ago
JSON representation
Ember component to view, edit and format JSON.
- Host: GitHub
- URL: https://github.com/Glavin001/ember-jsoneditor
- Owner: Glavin001
- License: mit
- Created: 2014-05-25T18:40:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-03-29T21:24:04.000Z (over 4 years ago)
- Last Synced: 2024-05-17T00:02:32.140Z (4 months ago)
- Language: JavaScript
- Homepage: http://glavin001.github.io/ember-jsoneditor/
- Size: 3.83 MB
- Stars: 18
- Watchers: 4
- Forks: 18
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-data-ui - ember-jsoneditor
README
ember-jsoneditor [](http://badge.fury.io/js/ember-jsoneditor)
==============================================================================
> Ember component for [JSON Editor](https://github.com/josdejong/jsoneditor/) 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/`](https://github.com/Glavin001/ember-jsoneditor/tree/master/tests/dummy/app).
## Documentation
See [jsoneditor](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md) 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 --}}
```
```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](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).