Yii 1.1: jsoneditorview

Widget taht will enable to edit JSON structures using WYSWIG-like, jQuery JSON Editor

WYSWIG-like JSON format editor, witch uses jQuery, JSON Editor plugin

Now package also have class CJuiJSONEditorInput, it can be used as an raw input field, or an input field for an ActiveRecord forms




  • Yii 1.0 or above


  • Extract the release file under protected/extensions


See the following code example:

// raw editor only
$this->widget('ext.jsonEditorView.JSONEditorView', array(
   'data'=>'{"value":"Initial JSON data-string"}',
// Input field, raw format
$this->widget('ext.jsonEditorView.JuiJSONEditorInput', array(
   'data'=>'{}' // Initial JSON data string
// Input field, ActiveRecord format
$this->widget('ext.jsonEditorView.JuiJSONEditorInput', array(
   'model'=>$model // ActiveRecord, or any CModel child class
   'attribute'=>'attribute_name' // Model attribute holding initial JSON data string

Change Log


  • fixed bug that widget produced broken JS on empty data field

September 19, 2010

  • fixed bug with wrong jQuery selector

September 17, 2010

  • Added ability to send modified JSON contents in POST form
  • Added JuiJSONEditorInput widget

September 16, 2010

  • Initial release.

Total 6 comments

#4987 report it
Wiseon3 at 2011/09/04 05:21am
Forgot closing <div> tag

At the end of run() function in JSONEditorView, before

echo CHtml::endForm();


echo CHtml::closeTag('div');

In JuiJSONEditorInput at the end of run() function before closing bracket, add

echo CHtml::closeTag('div');
#4077 report it
micz at 2011/06/03 10:33am
Problem with sending data

When I added {} to empty field it works fine. I fink i should add {} when field is empty.

#4076 report it
micz at 2011/06/03 10:28am
Problem with sending data

It do not work when field is empty.

#4075 report it
micz at 2011/06/03 10:23am
Problem with sending data

When i use it in form input field sends no data, in avctie record mode. reading data works fine, but there is no params as if there was no field.

#2297 report it
Deepak Pradhan at 2010/12/09 06:23pm
Very neat

Very helpful to manage mongo data

#40 report it
schmunk at 2010/10/06 10:47am
Awesome component

Wonder why nobody has rated this wonderful component already. Works like a charm and is very powrful.

One minor bugfix: JuiJSONEditorInput, line 72 if($this->hasModel() && !$this->model->isNewRecord) Otherwise it fails when creating a new record.

Leave a comment

Please to leave your comment.

Create extension