How to use jsoneditor - 10 common examples

$(document).ready( ()=> {

  /////////////////////////////////////////////////////////////
  // Sets up config editor
  //
  /////////////////////////////////////////////////////////////
  var editor = new JSONEditor($('.test-config')[ 0 ], {
    search: false
  })

  var defaultTestConfig = {
    dumpParticles: false,
    maxParticles: 1000,
    timeStep: 0.1,
    nbSteps: 5000,
    emitters: [ {
      id: 0,
      position: {
        x: 0,
        y: 0,
        z: 0
      },
      emissionRate: 4000,

// during the initial .set(), so we have a safety variable
      // _editorLoaded to prevent a bunch of recursion
      onChange: () => {
        if (!this._editorLoaded) {
          return;
        }
        this._hasEdits = true;
        onUserEdit(editorContainer, this._editor.get());
        this.render();
      }
    };

    if (!this._editor) {
      this._editorLoaded = false;
      editorContainer.innerHTML = '';
      this._editor = new JSONEditor(editorContainer, editorOptions);
      setupListeners(editorContainer);
    }
    if (!this._hasEdits) {
      this._editorLoaded = false;
      // Only set the JSON when it is loaded, either because it's
      // the first time we got it from the server or because the user
      // hit applyEdits.
      this._editor.set(this._state.lottie);
    }
    reannotate(editorContainer, this._state.lottie);
    // We are now pretty confident that the onChange events will only be
    // when the user modifies the JSON.
    this._editorLoaded = true;
  }

done.textContent = "Apply";
        done.title = "Upload the new privacy policy and refresh all views.";
        this.privacyEditor.appendChild(done);

        const cancel = document.createElement("button");
        cancel.textContent = "Cancel";
        cancel.title = "Do not update the privacy policy.";
        this.privacyEditor.appendChild(cancel);

        const save = document.createElement("button");
        save.textContent = "Save";
        save.title = "Write the privacy policy to disk, overwriting the existing policy on disk.";
        this.privacyEditor.appendChild(save);

        const editOptions: JSONEditorOptions = { mode: "text", mainMenuBar: false, statusBar: false };
        const editor = new JSONEditor(this.privacyEditor, editOptions, "{}");
        editor.set(this.privacySchema);
        const destroy = () => {
            this.privacyEditor.style.display = "none";
            editor.destroy();
            removeAllChildren(this.privacyEditor);
        };
        done.onclick = () => {
            try {
                const json = editor.getText();  // throws when text is invalid
                this.privacySchema = JSON.parse(json);
                this.uploadPrivacy(json);
                destroy();
            } catch (exception) {
                this.loadMenuPage.reportError(exception.toString());
            }
        };

componentDidMount () {
    // copy all properties into options for the editor
    // (except the properties for the JSONEditorReact component itself)
    const options = Object.assign({}, this.props);
    delete options.json;
    delete options.text;

    this.jsoneditor = new JSONEditor(this.container, options);

    if ('json' in this.props) {
      this.jsoneditor.set(this.props.json);
    }
    if ('text' in this.props) {
      this.jsoneditor.setText(this.props.text);
    }
    this.schema = cloneDeep(this.props.schema);
    this.schemaRefs = cloneDeep(this.props.schemaRefs);
  }

// There are sometimes a few onChange events that happen
      // during the initial .set(), so we have a safety variable
      // _editorLoaded to prevent a bunch of recursion
      onChange: () => {
        if (!this._editorLoaded) {
          return;
        }
        this._hasEdits = true;
        this.render();
      }
    };

    if (!this._editor) {
      this._editorLoaded = false;
      editorContainer.innerHTML = '';
      this._editor = new JSONEditor(editorContainer, editorOptions);
    }
    if (!this._hasEdits) {
      this._editorLoaded = false;
      // Only set the JSON when it is loaded, either because it's
      // the first time we got it from the server or because the user
      // hit applyEdits.
      this._editor.set(this._state.json);
    }
    // We are now pretty confident that the onChange events will only be
    // when the user modifies the JSON.
    this._editorLoaded = true;
  }

const availableModes = getAvailableEditorModes(readonly)

    const onChangeHandler = this.handleEditorContentChange
    const onErrorHandler = this.handleEditorError

    const options = {
      search: false, // TODO: fix search width
      mode: defaultMode,
      schema: configSchema,
      modes: availableModes,
      onChange: onChangeHandler,
      onError: onErrorHandler,
    }

    /** external library which does not be managed by React */
    const editor = new JSONEditor(document.getElementById(ELEM_ID_EDITOR_DIALOG), options, initialJSON)

    if (defaultMode !== JsonEditorMode.CODE) editor.expandAll()

    this.setState({ editor, }) // eslint-disable-line react/no-did-mount-set-state,react/no-set-state
  }

const defaultMode = getDefaultEditorMode()
    const availableModes = getAvailableEditorModes()
    const onChangeHandler = this.handleEditorContentChange
    const onErrorHandler = this.handleEditorError

    const options = {
      search: false, // TODO: fix search width
      schema: configSchema,
      mode: defaultMode,
      modes: availableModes,
      onChange: onChangeHandler,
      onError: onErrorHandler,
    }

    /** external library which does not be managed by React */
    const editor = new JSONEditor(document.getElementById(ELEM_ID), options)
    editor.set(SchemaUtil.InitialConnectorConfig)

    if (defaultMode !== JsonEditorMode.CODE) editor.expandAll()

    this.setState({ editor, }) // eslint-disable-line react/no-did-mount-set-state,react/no-set-state
  }

initEditor(el, options, json){
                this.$options.editor = new JSONEditor(el, options, json)
            }
        }

name: 'foo',
    schema: {},
    schemaRefs: { "otherSchema": {}},
    search: false,
    indentation: 2,
    theme: 'default'
};
options = {
    onEditable(node: Node) {
        return {field: true, value: false};
    }
};

let jsonEditor: JSONEditor;
jsonEditor = new JSONEditor(document.body);
jsonEditor = new JSONEditor(document.body, {});
jsonEditor = new JSONEditor(document.body, options, {foo: 'bar'});

jsonEditor.collapseAll();
jsonEditor.destroy();
jsonEditor.expandAll();
jsonEditor.focus();
jsonEditor.set({foo: 'bar'});
jsonEditor.setMode('text');
jsonEditor.setName('foo');
jsonEditor.setName();
jsonEditor.setSchema({});
jsonEditor.setText('{foo: 1}');
jsonEditor.format();
jsonEditor.compact();
jsonEditor.repair();

$(document).ready( ()=> {

  var editor = new JSONEditor($('.test-config')[ 0 ], {
    search: false
  })

  var defaultTestConfig = {
    dumpParticles: false,
    maxParticles: 1000,
    timeStep: 0.1,
    nbSteps: 5000,
    emitters: [ {
      id: 0,
      position: {
        x: 0,
        y: 0,
        z: 0
      },
      emissionRate: 4000,