Directory

← Back

juicy-jsoneditor

Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/Juicy/juicy-jsoneditor on 2019-05-22 ]

<juicy-jsoneditor>

Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install juicy-jsoneditor --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill, if needed:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    
  2. Import Custom Element:

    <link rel="import" href="bower_components/juicy-jsoneditor/juicy-jsoneditor.html">
    <!-- josdejong/jsoneditor#104 workaround-->
    <link rel="stylesheet" type="text/css" href="bower_components/jsoneditor/jsoneditor.min.css">
    
  3. Start using it!

    <juicy-jsoneditor></juicy-jsoneditor>
    

Options

Attribute Options Default Description
json Object {} JSON to edit.
mode String tree Editing mode, see API
modes Array of Strings List of editing modes to be available, see API
name String Object name, see API
search Boolean true Toggle search box, see API
indentation Number 2 Indentation, see API
history Boolean true Toggle history - undo, redo, see API

Properties

All attributes, plus:

Name Type Description
editor JSONEditor JSONEditor instance.

Methods

  • set,
  • setMode,
  • setName,
  • setText,
  • get,
  • getName,
  • getText

delegated to JSONEditor's methods

Events

Event event.details Description
change {action: "JSONEditor-action", params: {..} } Triggers when json changes.

Notes

Contributing and Development

History

For detailed changelog, check Releases.

License

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#polymer#1.9 - 2
  • jsoneditor#^5.9.5
  • fast-json-patch#^2.0.6
Released
2018-05-28
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 1.1.1
Browser
Browser Independent

juicy-jsoneditor - Vaadin Add-on Directory

Polymer Element that wraps josdejong/jsoneditor and adds two-way binding for edited JSON. juicy-jsoneditor - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Juicy/juicy-jsoneditor](https://github.com//Juicy/juicy-jsoneditor/blob/1.3.0/README.md) on 2019-05-22 ]** # <juicy-jsoneditor> > Polymer Element that wraps [josdejong/jsoneditor](http://github.com/josdejong/jsoneditor) and adds two-way binding for edited JSON. ## Demo [Check it live!](http://juicy.github.io/juicy-jsoneditor) ## Install Install the component using [Bower](http://bower.io/): ```sh $ bower install juicy-jsoneditor --save ``` Or [download as ZIP](https://github.com/juicy/juicy-jsoneditor/archive/master.zip). ## Usage 1. Import Web Components' polyfill, if needed: ```html ``` 2. Import Custom Element: ```html ``` 3. Start using it! ```html ``` ## Options Attribute | Options | Default | Description --- | --- | --- | --- `json` | *Object* | `{}` | JSON to edit. `mode` | *String* | `tree` | Editing mode, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) `modes` | *Array of Strings* | | List of editing modes to be available, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) `name` | *String* | | Object name, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) `search` | *Boolean* | `true` | Toggle search box, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) `indentation` | *Number* | `2` | Indentation, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) `history` | *Boolean* | `true` | Toggle history - undo, redo, see [API](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) ## Properties All attributes, plus: Name | Type | Description --- | --- | --- `editor` | *JSONEditor* | [JSONEditor](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#constructor) instance. ## Methods - `set`, - `setMode`, - `setName`, - `setText`, - `get`, - `getName`, - `getText` delegated to [`JSONEditor`'s methods](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#methods) ## Events Event | event.details | Description --- | --- | --- `change` | `{action: "JSONEditor-action", params: {..} }` | Triggers when json changes. ## Notes - `juicy-jsoneditor` is a [hybrid element](https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements). ## [Contributing and Development](CONTRIBUTING.md) ## History For detailed changelog, check [Releases](https://github.com/juicy/dummyCRM/releases). ## License - `` MIT - `josdejong/JSONEditor` [Apache License](https://github.com/josdejong/jsoneditor/blob/master/LICENSE)
Online