yii2-json-editor

JSON editor widget for Yii 2.
This widget uses JSON editor josdejong/jsoneditor.

Requirements

• PHP 5.4 or later or HHVM;
• Yii framework 2.

Installation

The preferred way to install this extension is through Composer.

To install, either run

$ php composer.phar require kdn/yii2-json-editor "*"

or add

"kdn/yii2-json-editor": "*"

to the require section of your composer.json file.

Usage

Minimal example:

<?php

use kdn\yii2\JsonEditor;

echo JsonEditor::widget(['name' => 'editor']);

with some options:

<?php

use kdn\yii2\JsonEditor;

echo JsonEditor::widget(
    [
        // JSON editor options
        'clientOptions' => [
            'modes' => ['code', 'form', 'text', 'tree', 'view'], // available modes
            'mode' => 'tree', // default mode
            'onModeChange' => 'function (newMode, oldMode) {console.log(this, newMode, oldMode);}',
        ],
        'collapseAll' => ['view'], // collapse all fields in "view" mode
        'containerOptions' => ['class' => 'container'], // HTML options for JSON editor container tag
        'expandAll' => ['tree', 'form'], // expand all fields in "tree" and "form" modes
        'name' => 'editor', // hidden input name
        'options' => ['id' => 'data'], // HTML options for hidden input
        'value' => $json, // JSON which should be shown in editor
    ]
);

with ActiveForm and Model:

<?php

use kdn\yii2\JsonEditor;

echo $form->field($model, 'data')->widget(
    JsonEditor::class,
    [
        'clientOptions' => ['modes' => ['code', 'tree']],
    ]
);

compact viewer expandable on demand:

<?php

use kdn\yii2\JsonEditor;

echo JsonEditor::widget(
    [
        'clientOptions' => ['mode' => 'view'],
        'collapseAll' => ['view'],
        'name' => 'viewer',
        'value' => $json,
    ]
);

To get instance of JSON editor on client side you can use the following JavaScript:

var jsonEditor = window[$('#YOUR-HIDDEN-INPUT-ID').data('json-editor-name')];
jsonEditor.set({"foo": "bar"});

Please view public properties in class JsonEditor to get info about all available options, they documented comprehensively.