<div id='{{ widget.name }}_editor_holder' style='padding-left:170px;'></div>
<textarea hidden readonly class="vLargeTextField" cols="10" id="id_{{ widget.name }}" name="{{ widget.name }}" rows="20">{{ widget.value | safe}}</textarea>

<script type="text/javascript">
    var element = document.getElementById('{{ widget.name }}_editor_holder');
    var json_value = {{ widget.value | safe }};

    var {{ widget.name }}_editor = new JSONEditor(element, {
        mode: "{{ widget.mode }}",
        indentation: 4,
        onChange: function() {
            var textarea = document.getElementById('id_{{ widget.name }}');
            var json_changed = JSON.stringify({{ widget.name }}_editor.get()['Object']);
            textarea.value = json_changed;
        }
    });

    {{ widget.name }}_editor.set({"Object": json_value}).expandAll()
</script>
