Skip to content

Instantly share code, notes, and snippets.

@Guest007
Created December 16, 2016 11:43
Show Gist options
  • Save Guest007/20b5da79c0a8f6f60c2d2f862adab7fa to your computer and use it in GitHub Desktop.
Save Guest007/20b5da79c0a8f6f60c2d2f862adab7fa to your computer and use it in GitHub Desktop.
JSON editor in admin for Django, jsoneditor, Postgres (from http://stackoverflow.com/a/40326235/2742038)
from django import forms
from django.contrib import admin
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from .models import Consumer
class JSONEditorWidget(forms.Widget):
template_name = 'jsoneditor.html'
def render(self, name, value, attrs=None):
context = {
'data': value,
'name': name
}
return mark_safe(render_to_string(self.template_name, context))
class ConsumerForm(forms.ModelForm):
class Meta:
model = Consumer
fields = '__all__'
widgets = {
'data': JSONEditorWidget()
}
class Media:
css = { 'all': ('jsoneditor/dist/jsoneditor.min.css',) }
js = ('jsoneditor/dist/jsoneditor.min.js', )
class ConsumerAdmin(admin.ModelAdmin):
list_display = ['pk']
model = Consumer
form = ConsumerForm
admin.site.register(Consumer, ConsumerAdmin)
<div id="{{ name }}_editor"></div>
<textarea cols="40" id="id_{{ name }}" name="{{ name }}" rows="10" required="" style="display: none">{{ data }}</textarea>
<script>
console.log('jsoneditor.html');
var container = document.getElementById("{{ name }}_editor");
var options = {
modes: ['code', 'tree'],
search: true,
onChange: function () {
var json = editor.get();
document.getElementById("id_{{ name }}").value=JSON.stringify(json);
}
};
var editor = new JSONEditor(container, options);
var json = {{ data|safe }};
editor.set(json);
</script>
from django.contrib.postgres.fields import JSONField
class Consumer(models.Model):
data = JSONField(default={}, db_index=True)dmin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment