{"id":20105457,"url":"https://github.com/nnseva/django-jsoneditor","last_synced_at":"2025-04-04T09:06:53.306Z","repository":{"id":3319729,"uuid":"46218363","full_name":"nnseva/django-jsoneditor","owner":"nnseva","description":"Django JSONEditor input widget to provide javascript online JSON Editor","archived":false,"fork":false,"pushed_at":"2023-02-15T08:26:30.000Z","size":1549,"stargazers_count":189,"open_issues_count":6,"forks_count":53,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T08:05:12.083Z","etag":null,"topics":["bounties","django","field","javascript","json","json-fields","python","tree","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nnseva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-15T13:19:58.000Z","updated_at":"2025-03-20T12:51:09.000Z","dependencies_parsed_at":"2022-09-16T09:11:23.790Z","dependency_job_id":null,"html_url":"https://github.com/nnseva/django-jsoneditor","commit_stats":{"total_commits":95,"total_committers":19,"mean_commits":5.0,"dds":0.4421052631578948,"last_synced_commit":"dfc1ad59ef7da77c754a1beb31f07417e2a3a334"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nnseva%2Fdjango-jsoneditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nnseva%2Fdjango-jsoneditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nnseva%2Fdjango-jsoneditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nnseva%2Fdjango-jsoneditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nnseva","download_url":"https://codeload.github.com/nnseva/django-jsoneditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149500,"owners_count":20891954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bounties","django","field","javascript","json","json-fields","python","tree","widget"],"created_at":"2024-11-13T17:47:06.208Z","updated_at":"2025-04-04T09:06:53.282Z","avatar_url":"https://github.com/nnseva.png","language":"JavaScript","readme":"# Django-JSONEditor\n\nDjango-JSONEditor is an online structured JSON input widget for Django appropriate for various JSONField's provided for Django.\n\nCode of the javascript JSONEditor online editor has been got from the http://jsoneditoronline.org/.\n\nSee the latest versions of the javascript online JSON Editor here: https://github.com/josdejong/jsoneditor\n\nSample views:\n\n\u003cimg alt=\"json editor\" src=\"https://raw.github.com/josdejong/jsoneditor/master/misc/jsoneditor.png\"\u003e\n\n## Installation\n\n### Latest version from the GIT repository::\n\n    pip install \"git+git://github.com/nnseva/django-jsoneditor.git\"\n\n### Stable version from the PyPi repository::\n\n    pip install django-jsoneditor\n\nNote that you should use one of original JSONField packages to provide the JSONField itself.\n\n## Configuration\n\nYou **should** append `jsoneditor` into the `INSTALLED_APPS` of your `settings.py` file:\n```python\nINSTALLED_APPS = (\n    # ...\n    'jsoneditor',\n    # ...\n)\n```\n\nYou **can** use CDN repositories to get JSONEditor javascript code, or host it yourself, instead of the packaged one using the following two settings in your `settings.py` file:\n```python\nJSON_EDITOR_JS = 'whatever-your-want.js'\nJSON_EDITOR_CSS = 'whatever-your-want.css'\n```\n\nJust look to the http://cdnjs.com/libraries/jsoneditor and select the preferred one, like:\n```python\nJSON_EDITOR_JS = 'https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/8.6.4/jsoneditor.js'\nJSON_EDITOR_CSS = 'https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/8.6.4/jsoneditor.css'\n```\n\n### Custom JSONEditor initialization\nYou **can** change initial parameters for the `jsoneditor.JSONEditor`\n*javascript* constructor initial call for your own purposes using\n`JSON_EDITOR_INIT_JS` settings. Copy the `jsoneditor/static/django-jsoneditor/init.js`\nfile to your own static storage, change initial values of the\n`django_jsoneditor_init` object and setup the `JSON_EDITOR_INIT_JS`\nvariable of the `settings` file to point your own modified copy of the\nfile.\n\n**Note** that the django original static file subsystem is used to\nrefer to the init file.\n\nFor example, let's say your project has a `myapp` application,\nand you would like to init all available modes of the JSONEditor\ninstead of two allowed by default.\n\n* copy the `jsoneditor/static/django-jsoneditor/init.js` to `myapp/static/jsoneditor-init.js` file\n* change content of the `myapp/static/jsoneditor-init.js` to:\n```javascript\ndjango_jsoneditor_init = {\n    mode: 'tree',\n    modes: ['code', 'form', 'text', 'tree', 'view'] // all modes\n}\n```\n* insert into your `settings.py` file the following code:\n```python\nJSON_EDITOR_INIT_JS = \"jsoneditor-init.js\"\n```\n(**note** that the static file subsystem refers to static files without `static` prefix)\n\nYou can extend the `JSON_EDITOR_INIT_JS` file as you wish; it will be used on every\npage where the `JSONEditor` widget is used just before the `django-jsonfield.js` file.\n\n### Custom Ace initialization\nIn the same fashion, you can also set options for the Ace editor that is initialized when either\nstarting with or switching to 'code' mode. These options can be found here:\nhttps://github.com/ajaxorg/ace/wiki/Configuring-Ace. This can for example come in handy when\nwanting to customize for example the height or looks of the editor. The default of this file can be\nfound in `jsoneditor/static/django-jsoneditor/ace_options.js`, which is empty. A custom one can be\npointed to by adding the following line to your `settings.py`:\n ```python\nJSON_EDITOR_ACE_OPTIONS_JS = \"[your_ace_options_file].js\"\n```\n\n### Per-field customization\nYou can also override JSONEditor and Ace initialization on a per-field basis. To do this, pass the\ndesired `init_options` and/or `ace_option` to the widget's initializer. For example, let's\nsay you want to make a certain field read-only:\n\n```python\nfrom django.contrib import admin\nfrom django.db.models.fields.json import JSONField\nfrom jsoneditor.forms import JSONEditor\n\n\nclass MyAdmin(admin.ModelAdmin):\n    formfield_overrides = {\n        JSONField: {\n            \"widget\": JSONEditor(\n                init_options={\"mode\": \"view\", \"modes\": [\"view\", \"code\", \"tree\"]},\n                ace_options={\"readOnly\": True},\n            )\n        }\n    }\n```\n\nThese values will override any project-level options in the custom javascript files described above.\n\n\n## Use\n\nYou can use the JSONEditor widget for fields in selected Admin classes like:\n\nadmin.py:\n```python\nfrom django.contrib import admin\nfrom django.db.models.fields.json import JSONField\nfrom jsoneditor.forms import JSONEditor\n\n\nclass MyAdmin(admin.ModelAdmin):\n    formfield_overrides = {\n        JSONField: {'widget': JSONEditor},\n    }\n```\n\nOr use the original JSONField implementation fixed by the package.\n\nRight now there are the following fixed implementations:\n\n* `jsoneditor.fields.django_json_field.JSONField` replaces a `JSONField` from https://github.com/derek-schaefer/django-json-field (**NOTE** the package is not compatible with django v.1.9)\n* `jsoneditor.fields.django_jsonfield.JSONField` replaces a `JSONField` from https://launchpad.net/django-jsonfield package\n* `jsoneditor.fields.postgres_jsonfield.JSONField` replaces `django.contrib.postgres.fields.JSONField` (**NOTE** this field type appears only from django v.1.9)\n* `jsoneditor.fields.django_extensions_jsonfield.JSONField` replaces `django_extensions.db.fields.json.JSONField`\n* `jsoneditor.fields.jsonfield` has been added for people using https://github.com/rpkilby/jsonfield (the https://github.com/bradjasper/django-jsonfield now redirects there)\n* `jsoneditor.fields.django3_jsonfield` uses the standard JSONField and JSONFormField provided by Django 3+\n\nTo use the fixed implementation instead of the original one, just replace your import with the desired one. For example, for Django 3.0 and above:\n\nmodels.py:\n```python\nfrom django.db import models\n\n# from json_field import JSONField replaced by:\nfrom jsoneditor.fields.django3_jsonfield import JSONField\n# Create your models here.\n\nclass TestModel(models.Model):\n    my_field = JSONField()\n```\n\nYou can access the underlying ``JSONEditor`` JS objects in your JavaScript via dictionary named ``jsonEditors``. This dictionary's keys are the IDs of the fields generated by this component in the form: ``\"id\"+[your form field name]+\"_json_jsoneditor\"``, e.g. ``id_template_parameters_json_jsoneditor``. The values in the dictionary are the instances of the correspondent JSONEditor objects.\n\n\n## Jsonschema\n\nYou can pass a jsonschema as an arguement to `JSONEditor` widget so that\njsoneditor can validate user inputs. Example:\n\n``` python\nfrom django import forms\nfrom jsoneditor.forms import JSONEditor\n\nclass MyAdmin(admin.ModelAdmin):\n    def formfield_for_dbfield(self, db_field, request, **kwargs):\n        field = super().formfield_for_dbfield(db_field, request, **kwargs)\n        if isinstance(field, forms.fields.JSONField):\n            field.widget = JSONEditor(jsonschema={\n                \"type\": \"array\",\n                \"items\": {\n                    \"type\": \"string\"\n                }\n            })\n        return field\n\n```\n\n## Custom Style\n\nYou can pass the style in attrs params for `JSONEditor` widget so that\njsoneditor render with the style what you setup. Example:\n\n``` python\nfrom json_field import JSONField\nfrom jsoneditor.forms import JSONEditor\n\nclass MyAdmin(admin.ModelAdmin):\n    formfield_overrides = {\n        JSONField: {'widget': JSONEditor(attrs={'style': 'width: 620px;'})}\n    }\n```\n## Custom Encoders\n\nThere are situations where you may prefer to use a custom [JSONEncoder](https://docs.python.org/3/library/json.html#json.JSONEncoder) class. For example, you may want to use Django's [DjangoJSONEncoder](https://docs.djangoproject.com/en/4.1/topics/serialization/#djangojsonencoder) to handle timestamps in a Django-friendly way. You can do this by passing the `encoder` param as an initialization argument.\n\n``` python\nfrom django.core.serializers.json import DjangoJSONEncoder\n\nclass MyAdmin(admin.ModelAdmin):\n    formfield_overrides = {\n        JSONField: {'widget': JSONEditor(encoder=DjangoJSONEncoder)} # will now encode/decode python datetime and timestamp objects!\n    }\n```\n\n## Collecting bounties\n\nYou are free to give some bounties on https://www.bountysource.com/ to force solving existent or new issues\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnnseva%2Fdjango-jsoneditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnnseva%2Fdjango-jsoneditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnnseva%2Fdjango-jsoneditor/lists"}